We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to maintain grid state while page reload

Platform: ASP.NET MVC (Classic) |
Control: Grid |
.NET Framework: 4.5 |
Product Version:
Tags: general

How to “Maintain Grid state while page reload after Paging, sorting, and Filtering”

This section demonstrates how to maintain page state (paging, sorting and filtering) at initial load with the help of Jquery cookies.

  1. Store the necessary information in cookies while performing paging, sorting and filtering actions at action begin event.
  2. Use this cookie information and assign necessary values to clientobject and request param at page reload in “actionBegin” event to maintain paging, sorting and filtering actions.






      .ClientSideEvents(events =>


























  function Begin(sender, args) {


     var gridObj = $find("GenericListGrid");


     // necessary filtering information’s are stored in cookies

     if (args.requestType == "Filtering") {

       var serialData = JSON.stringify(gridObj._filters);

       $.cookie('FilterInformation', serialData);



     // necessary sorting information’s are stored in cookies

     if (args.requestType == "sorting") {

       var sortCols = JSON.stringify(gridObj._sortedColumns);

       var sortDirs = JSON.stringify(gridObj._sortdirection);

       var requestPar = args.data.GridRequestParams;

       $.cookie('SortCols', sortCols);

       $.cookie('SortDirs', sortDirs);

       $.cookie('requestPar', requestPar);



     // necessary paging information’s are stored in cookies

     if (args.requestType == "paging") {

       var currentpage=JSON.stringify(gridObj._pager._currentPageNo);

       var currentindex=JSON.stringify(args.data.StartIndex);

       $.cookie("currentpage", currentpage);

       $.cookie("currentindex", currentindex);



     // To maintain grid state the stored information’s are assigned to

     client object and request params in the Request type “refresh”

     if (args.requestType == "Refresh") {

       if ($.cookie("FilterInformation") != null) {

         var obj = JSON.parse(args.data.ClientObject);

         var filtercondition = JSON.parse($.cookie("FilterInformation"));

         obj.FilterConditions = filtercondition;

         args.data.ClientObject = JSON.stringify(obj);

         args.data.FilterObject = $.cookie('FilterInformation');

         var currFilterInfo = $.parseJSON($.cookie('FilterInformation'));

         $.each(currFilterInfo, function (indx, val) {


           targetIndex =


           if (targetIndex != -1)


             th').get(targetIndex + gridObj.get_ColumnOffset() +





     if ($.cookie("currentpage") != null && $.cookie("currentindex") != null)


         var obj = JSON.parse(args.data.ClientObject);

        var currentpage = JSON.parse($.cookie("currentpage"));

        var currentindex = JSON.parse($.cookie("currentindex"));

        obj.CurrentPageNo = currentpage;

        obj.CurrentIndex = currentindex;

        args.data.ClientObject = JSON.stringify(obj);

        args.data.StartIndex = currentindex;

        sender._pager._currentPageNo = currentpage;


     if ($.cookie("SortCols") != null && $.cookie("SortDirs") != null &&

         $.cookie('requestPar') != null) {

        var obj = JSON.parse(args.data.ClientObject);

        var sortcol = JSON.parse($.cookie("SortCols"));

        var sortdir = JSON.parse($.cookie("SortDirs"));

        args.data["SortDescriptors[0].SortDirection"] = sortdir;

        args.data["SortDescriptors[0].ColumnName"] = sortcol;

        obj.SortColumn = sortcol;

        obj.SortDirection = sortdir;

        args.data.ClientObject = JSON.stringify(obj);

        args.data.GridRequestParams = $.cookie('requestPar');

        var currSortCol = $.parseJSON($.cookie('SortCols'));

        var currSortDir = $.parseJSON($.cookie('SortDirs'));


        $.each(currSortCol, function (indx, val) {



           targetIndex = gridObj.get_MvcTable().get_columnIndexByMember(val);

           if (targetIndex != -1) {

             if ($($($(gridObj.get_HeaderTable()).find('tr:first

                 th').get(targetIndex + gridObj.get_ColumnOffset() +


                 .find("." + currSortDir[indx]).length == 0)

                 $($($(gridObj.get_HeaderTable()).find('tr:first th')

                 .get(targetIndex + gridObj.get_ColumnOffset() +


                 .append('<span class=' + currSortDir[indx] +












    public ActionResult Index(PagingParams args)


      IEnumerable data = OrderRepository.GetAllRecords().Take(100).ToList();

      return data.GridJSONActions<Student>();






The sample output we have obtained after page reload is shown below,


You must log in to leave a comment
Parag Bagga
Jan 20, 2017
Hi can you please tell me how to maintain the state of grid(sorting,paging,filtering) in webforms coming back from the child page in ejgrid

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile