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

1. Handle the dataBound event.
2. In the dataBound event handler, based on the columns.hidden property, use the hideColumn 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>