New to Kendo UI for jQuery? Download free 30-day trial

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>
In this article