Persist Hidden Columns after setOptions Is Applied
Environment
Product Version | 2018.2.620 |
Product | Progress® Kendo UI® Grid for jQuery |
Description
How can I persist the hidden columns after setting the options of the Grid?
Solution
- Handle the
dataBound
event. - In the
dataBound
event handler, based on thecolumns.hidden
property, use thehideColumn
method.
<div id="example">
<div class="box wide">
<a href="#" class="k-button" id="save">Save State</a>
<a href="#" class="k-button" id="load">Load State</a>
</div>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
columnMenu: true,
dataBound: function(e) {
var grid = e.sender;
var columns = grid.columns;
columns.forEach(function(e, i) {
if (e.hidden === false) {
grid.hideColumn(e);
}
});
},
pageable: true,
columns: [{
field: "ContactName",
title: "Contact Name",
minScreenWidth: 700,
width: 250
}, {
field: "ContactTitle",
title: "Contact Title",
minScreenWidth: 700,
width: 350
}, {
field: "CompanyName",
title: "Company Name",
minScreenWidth: 700,
width: 350
}, {
field: "Country",
minScreenWidth: 700,
width: 450
}]
});
var grid = $("#grid").data("kendoGrid");
$("#save").click(function(e) {
e.preventDefault();
localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
});
$("#load").click(function(e) {
e.preventDefault();
var options = localStorage["kendo-grid-options"];
if (options) {
var parsedOptions = JSON.parse(options);
grid.setOptions({
columns: parsedOptions.columns
});
}
});
});
</script>
</div>