Edit this page

Persist Custom Filters in Grid

Environment

Product Progress Kendo UI Grid
Progress Kendo UI version Created with version 2017.3.913

Description

How can I persist the customized Grid filters when I save and restore the Grid state?

Solution

The JSON.stringify() method is not able to serialize function references. As a result and because, generally, stringification is used for the retrieved Grid state, all configuration fields which represent function references are lost and the custom filters are not restored.

Add the function references back to the de-serialized configuration object before passing it to the setOptions method.

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>

<a href="#" class="k-button" id="save">Save State</a>
<a href="#" class="k-button" id="load">Load State</a>

<div id="grid"></div>

<script>
$(document).ready(function() {
    $("#grid").kendoGrid({
    dataSource: {
        data: createRandomData(50),
        schema: {
        model: {
            fields: {
            City: { type: "string" },
            Title: { type: "string" },
            BirthDate: { type: "date" }
            }
        }
        },
        pageSize: 15
    },
    height: 550,
    scrollable: true,
    filterable: {
        mode: "row",
    },
    pageable: true,
    columns: [
        {
        title: "Name",

        filterable: false,
        template: "#=FirstName# #=LastName#"
        },
        {
        field: "City",
        width: 250,
        filterable: {
            cell: {
            operator: "eq",
            showOperators: false,
            template: cityFilter
            }
        }
        },
        {
        field: "Title",
        width: 300,
        filterable: {
            cell: {
            operator: "eq",
            showOperators: false,
            template: titleFilter
            }
        }
        }
    ]
    });

    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"];
    var optionsJSON = JSON.parse(options);
    optionsJSON.columns[1].filterable = {
            cell: {
            operator: "eq",
            showOperators: false,
            template: cityFilter
            }
        };

    optionsJSON.columns[2].filterable = {
            cell: {
            operator: "eq",
            showOperators: false,
            template: titleFilter
            }
        };

    if (optionsJSON) {
        grid.setOptions(optionsJSON);
    }
    });

});

function titleFilter(args) {
    args.element.kendoAutoComplete({
    dataSource: titles
    });
}

function cityFilter(args) {
    args.element.kendoDropDownList({
    dataSource: cities,
    optionLabel: "--Select Value--"
    });
}

</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy