Persist the State of the Grid Automatically
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Description
How can I automatically persist the sort, filter, and group Grid options when the user leaves the page and keep the look of the Grid the same as the user closed the tab?
Solution
The state of the Grid is persisted in the beforeunload
event handler. This way, any operation which the user performs before leaving the page is persisted. To restore the Grid state, use the document.ready
event.
The autoBind
property of the Grid is able to detect any options that are already persisted, which prevents the multiple requests of data.
<div id="grid"></div>
<script>
$(document).ready(function () {
var options = localStorage["grid-options"];
$("#grid").kendoGrid({
// prevent requesting data multiple times if there are persisted options
autoBind: !options,
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
reorderable: true,
resizable: true,
columnMenu: true,
filterable: {
mode: "row"
},
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 250,
locked: true
}, {
field: "ContactTitle",
title: "Contact Title",
width: 350
}, {
field: "CompanyName",
title: "Company Name",
width: 350
}, {
field: "Country",
width: 450
}]
});
var grid = $("#grid").data("kendoGrid");
if (options) {
grid.setOptions(JSON.parse(options));
}
window.onbeforeunload = function() {
localStorage["grid-options"] = kendo.stringify(grid.getOptions());
return;
}
});
</script>