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: November 16, 2018).
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 |
Published Date: July 8, 2014 |
Last Revised Date: July 10, 2014 |
.NET Framework: 4.5 |
Product Version: 12.1.0.43
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.

[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

ADD COMMENT
You must log in to leave a comment
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

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