Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

ASP.NET jQuery Template Grid with Paging, Sorting and Ajax Method Invocation Mechanism

, 28 Jan 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
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 sid

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 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 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 Plugin File on your web page.

Begin With jQuery Template Grid:

  • jQuery Template Grid

jQuery Script File References:

  • jQuery Template Plugin 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 reated 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 mendatory parts of that grid, use as and when required.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kashif Akhter
Team Leader
Pakistan Pakistan
A computer software development professional with a proven track record of extensive experience of enterprise software development and building the manageable, scalable, and robust enterprise software architectures.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
SuggestionNice Artical - working example will helpful Pinmemberadkalavadia18-Feb-14 19:53 
QuestionGood Article - But very lengthy code Pinmemberisrarali30-Jan-14 1:55 
AnswerRe: Good Article - But very lengthy code PinprofessionalKashif Akhter30-Jan-14 7:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 28 Jan 2014
Article Copyright 2014 by Kashif Akhter
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid