Edit this page

Persist Hidden Columns after setOptions Is Applied

Environment

Product Version 2018.2.620
Product Grid for Progress® Kendo UI®

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy