The traditional ASP.NET GridView control is a web server control that renders on run time at web server and occupies more memory and CPU utilization at web server. To provide your user with a better and responsive web application experience, I came up with a jQuery Template Grid. This is a client side grid mechanism that occupies the required memory at client side and your web server is freed up from all the memory overheads and entertains just the Data acquisition and manipulation calls.
The jQuery Template Grid provides more control over user interface with robust data fetching and displaying mechanisms in a grid. The jQuery Template Grid is also flexible to cater to the design issues such as height, width, scrolling and header row fixing. The jQuery Template Grid is also flexible to design in div based environment instead of traditional <table> structure with definition of height and width in a percentage style and to cater to the header row fix mechanism.
In this post, I will show how to design a jQuery Template Grid with the invocation of data acquisition mechanism from client side with Ajax call using jSon as data format and the paging, sorting and DB level paging mechanisms with design layout snaps.
Minimum Requirements For jQuery Template Grid
- Download and Reference of jQuery Script File on your web page
- Download and Reference of jQuery Template plug in File on your web page
Begin With jQuery Template Grid:
jQuery Script File References:
- jQuery Template plug in File Reference
Client Side Function to Populate the jQuery Grid
function LoadGrid(pageSize, pageNumber, ColumnName) {
var OrderBy = ColumnName;
var OrderDirection = "";
if (ColumnName != "CONTENT_NAME ASC") {
OrderBy = ColumnName;
OrderDirection = jQuery('#hfSortInfo').attr("title");
}
else {
var OrderArray = ColumnName.split(' ');
OrderBy = OrderArray[0];
OrderDirection = OrderArray[1];
}
jQuery(".loadingDiv").show();
jQuery.ajax({
type: 'POST', url: '<%=ResolveUrl("~/ScriptServices/SecContent.asmx/GetAllContents")%>',
data: "{'PageSize':'" + pageSize + "', 'PageNumber':'" + pageNumber + "',
'OrderBy':'" + OrderBy + "', 'OrderDirection':'" + OrderDirection + "'}",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
if (msg != null&& msg.d != "" && msg.d != null) {
$('.GridContent').show();
$('.divNoData').hide();
varBresponse = eval("(" + msg.d + ")");
jQuery(".TempRow").remove();
jQuery('#ContentSetupTemp').tmpl(Bresponse.esUtility).appendTo(".ResultDiv");
jQuery(".loadingDiv").hide();
if (jQuery("#Hidden").val() != "Dont Add") {
var listItems = "";
var pageCount = Bresponse.esUtility[0].Page_Count;
jQuery("#ddlpage").empty();
for (var i = 0; i < pageCount; i++) {
listItems += "<option value='" + (i + 1) + "'>" +
(i + 1) + "</option>";
}
jQuery("#ddlpage").append(listItems);
if (jQuery("#ddlpage option:selected").val() == 1) {
jQuery("#imgDecrement").attr
("src", "../../App_Themes/images/previous_btn_ov.jpg");
jQuery("#imgIncrement").attr
("src", "../../App_Themes/images/next_btn.jpg");
}
if (pageCount == 1) {
jQuery("#imgIncrement").attr
("src", "../../App_Themes/images/next_btn_ov.jpg");
}
} //End If Hidden != Dont Add
jQuery("#<%=lblRecCountBottom.ClientID %>").html
("Total Records : " + Bresponse.esUtility[0].Record_Count);
jQuery(".loadingDiv").hide();
} //End If
else {
$('.GridContent').hide();
$('.divNoData').show();
jQuery(".loadingDiv").hide();
}
}, //End Success
error: function (msg) {
jQuery(".loadingDiv").hide();
$('.GridContent').hide();
$('.divNoData').show();
AlertDialog("Error", 'There was some server problem.
Kindly contact with administrator.', 200, 400);
}
}); //End Ajax
}
Page Size Changing With Dropdownlist
jQuery(".clsDdlPageSize").live('change', function(e) {
jQuery("#ddlpage").empty();
jQuery("#Hidden").val("Add");
pageSize = jQuery(this).val();
pageNumber = 1;
LoadGrid(pageSize, pageNumber, "");
return false;
});
Page Index Changing With Dropdownlist
jQuery(".clsDdlPage").live('change', function(e) {
pageSize = jQuery(".clsDdlPageSize").val();
pageNumber = jQuery(this).val();
if (jQuery("#ddlpage option:selected").val() == 1) {
jQuery("#imgDecrement").attr("src", "../../App_Themes/images/previous_btn_ov.jpg");
}
if (jQuery("#ddlpage option:selected").val() != 1) {
jQuery("#imgDecrement").attr("src", "../../App_Themes/images/previous_btn.jpg");
}
if (jQuery("#ddlpage option:selected").val() == jQuery("#ddlpage option:last").val()) {
jQuery("#imgIncrement").attr("src", "../../App_Themes/images/next_btn_ov.jpg");
}
if (jQuery("#ddlpage option:selected").val() != jQuery("#ddlpage option:last").val()) {
jQuery("#imgIncrement").attr("src", "../../App_Themes/images/next_btn.jpg");
}
jQuery("#Hidden").val("Dont Add");
LoadGrid(pageSize, pageNumber, "");
return false;
});
Client Side Sorting Functions
functionSetColumnNameForSorting(columnName, sortingTD) {
jQuery('#hfSortInfo').val(columnName);
jQuery('.Sortable').removeClass('SortBg SortUp SortDown');
jQuery('.Sortable').addClass('SortBg');
if(jQuery('#hfSortInfo').attr('title') == 'asc') {
columnName = columnName + " desc";
jQuery('#hfSortInfo').attr('title', 'desc');
sortingTD.closest('.Sortable').addClass('SortDown');
}
elseif (jQuery('#hfSortInfo').attr('title') == 'desc') {
columnName = columnName + " asc";
jQuery('#hfSortInfo').attr('title', 'asc');
sortingTD.closest('.Sortable').addClass('SortUp');
}
else{
columnName = columnName + " asc";
jQuery('#hfSortInfo').attr('title', 'asc');
sortingTD.closest('.Sortable').removeClass('SortBg SortUp SortDown');
sortingTD.closest('.Sortable').addClass('SortBg');
}
returncolumnName;
}
functionResetSortOrder(SortColumn) {
if(jQuery('#hfSortInfo').val() != SortColumn) {
jQuery('#hfSortInfo').attr('title', 'asc');
}
}
functionSorting(columnName) {
pageSize = jQuery(".clsDdlPageSize").val();
pageNumber = jQuery(".clsDdlPage").val();
LoadGrid(pageSize, pageNumber, columnName);
returnfalse;
}
jQuery(".Sortable").click(function (e) {
varsortingTD = $(this).children('td');
varsortTitle = $(this).children('td').attr('SortingColumn');
if(sortTitle) {
ResetSortOrder(sortTitle);
columnName = SetColumnNameForSorting(sortTitle, sortingTD);
Sorting(sortTitle);
return false;
}
returnfalse;
});
HTML Design Code
<div align="center">
<div style="width: 70%;">
<div class="content" align="center"
style="height: 100%;">
<div class="GridContent"
style="display: none; border: 1px solid Black; height: 100%;
width: 100%;"align="center">
<div class="divHeaderDiv"
style="width: 100%;">
<table style="width: 100%;">
<tr style="font-size: .9em; width: 100%;"
class="blueGridHeaderBackgroundWhiteText">
<td style="width: 18%;">
<table style="width: 100%;">
<tr class="Sortable SortBg"
style="width: 100%;">
<tdsortingcolumn=
"MODULE_NAME"title="Module Name"
style="width: 100%;"
align="left">
Module Name
</td>
</tr>
</table>
</td>
<td style="width: 18%;">
<table style="width: 100%;">
<tr class="Sortable SortBg"
style="width: 100%;">
<tdsortingcolumn=
"DISPLAY_NAME"
title="Content Name"
style="width: 100%;"
align="left">
Content Name
</td>
</tr>
</table>
</td>
<td style="width: 18%;">
<table style="width: 100%;">
<tr class="Sortable SortBg"
style="width: 100%;">
<tdsortingcolumn=
"CONTENT_TYPE"
title="Content Type"
style="width: 100%;"
align="left">
Content Type
</td>
</tr>
</table>
</td>
<td style="width: 33%;">
<table style="width: 100%;">
<tr class="Sortable SortBg"
style="width: 100%;">
<tdsortingcolumn=
"QUALIFIED_NAME"
title="Fully Qualified Name(URL)"
style="width: 100%;"
align="left">
Qualified Name
</td>
</tr>
</table>
</td>
<td style="width: 6%;">
</td>
</tr>
</table>
</div>
<div class="ResultDiv" style="height: 130px;
width: 100%; overflow: auto;">
</div>
<div id="divPager" class="divPager"
style="width: 100%; border-top: 1px solid Black;">
<table style="width: 100%;">
<tr>
<td align="left"style="font-weight: bold;
font-size: 0.9em; width: 30%;">
Page Size
<select id="ddlpagesize"
class="clsDdlPageSize"style="width: 28%;
height: 10%; vertical-align: top;
font-size: 0.8em;">
<option>10</option>
<option>25</option>
<option>50</option>
<option>100</option>
<option>250</option>
</select>
</td>
<td align="center"style="vertical-align: top;
width: 40%;">
<img alt="" id="imgDecrement"
class="ClsimgDecrement"
src="../../App_Themes/images/previous_btn.jpg"
height="10%"width="6%"/>
<select id="ddlpage"class="clsDdlPage dropDown"
style="width: 20%; height: 7%; vertical-align: top;
font-size: 0.8em;">
</select>
<img alt="" id="
imgIncrement"class="ClsimgIncrement"
src="../../App_Themes/images/next_btn.jpg"
height="10%"width="6%"/>
</td>
<td align="right"style="width: 30%;
vertical-align: top">
<asp:Label ID="lblRecCountBottom"
runat="server"Font-Bold="
True"CssClass="clsLblRecordCount"
Font-Size=".9em">
</asp:Label>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
No data found against your searching criteria.
Template Row Script
<script id="ContentSetupTemp"type="text/x-jquery-tmpl">
<div class="TempRow" style="width: 100%">
<table style="width: 100%" border="1">
<tr style="width: 100%">
<td style="width: 20%" align="left">
<span class="clsRightIds" style="display:none; font-size: 0.8em">
${RIGHT_IDS}</span>
<span class="clsModuleId" style="display:none; font-size: 0.8em">
${MODULE_ID}</span>
<span class="clsModuleName" style="font-size: 0.8em">
${MODULE_NAME}</span>
</td>
<td style="width: 20%" align="left">
<span class="clsContentId" style="display:none; font-size: 0.8em">
${CONTENT_ID}</span>
<span class="clsDisplayName" style="font-size: 0.8em">
${DISPLAY_NAME}</span>
</td>
<td style="width: 20%" align="left">
<span class="clsContentType" style="display:none; font-size: 0.8em">
${CONTENT_TYPE_ID}</span>
<span class="clsContentTypeId" style="font-size: 0.8em">
${CONTENT_TYPE}</span>
</td>
<td style="width: 35%" align="left">
<span class="clsQualifiedName" style="font-size: 0.8em">
${QUALIFIED_NAME}</span>
</td>
<td style="width: 5%" align="center">
<img src="../../App_Themes/images/EditPencil.jpg"
style="cursor: pointer" class="clsEditContent"
title="Edit Content" alt="Edit" />
</td>
</tr>
</table>
</div>
</script>
Conclusion
Use of the jQuery Template Grid will provide you more satisfaction in your web development related work and provide a better and more responsive web experience to your users by avoiding the server side memory and CPU utilization with a beautiful and flexible graphical user interface. Paging and sorting functions are not the mandatory parts of that grid, use as and when required.
