Articles in this section
Category / Section

How to maintain grid state while page reload

2 mins read

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.

[CSHTML]

 

    @(Html.Syncfusion().Grid<Student>("GenericListGrid")

      .ActionMode(ActionMode.JSON)

      ...

      .ClientSideEvents(events =>

      {

       events.OnActionBegin("Begin");

      })

      ...

     )

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[SCRIPT]

 

 

  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) {

           gridObj._filters.push(val);

           targetIndex =

           gridObj.get_MvcTable().get_columnIndexByMember(this.ColumnName);

           if (targetIndex != -1)

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

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

             gridObj.get_GroupedColumns().length)).children('.FilterIcon')

             .removeClass('FilterIconTick').addClass('FilterIconTick');

         });

     }

     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) {

           gridObj._sortedColumns.push(val);

           gridObj._sortdirection.push(currSortDir[indx]);

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

           if (targetIndex != -1) {

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

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

                 gridObj.get_GroupedColumns().length)).find("div")[0])

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

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

                 .get(targetIndex + gridObj.get_ColumnOffset() +

                 gridObj.get_GroupedColumns().length)).find("div")[0])

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

                 '>&nbsp;</span>');

            }

         });

    }

    }

    }

 

 

[CS]

 

    [AcceptVerbs(HttpVerbs.Post)]

    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,

Fig

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied