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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to maintain grid state while page reload

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

Article ID: Published Date: Last Revised Date: Platform: Control: .NET Framework: Product Version:
2355 07/08/2014 07/10/2014 ASP.NET MVC (Classic) Grid 4.5 12.1.0.43
Tags:
Did you find this information helpful?
Comments
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
Reply
Add Comment
You must log in to leave a comment

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