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.
- Store the necessary information in cookies while performing paging, sorting and filtering actions at action begin event.
- 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] + '> </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