Grid state persistance with column filters or search bar

[luke]

Hi,

I have set up my grid table to save gridOption on certain events (etc., Sorting, column reorder, filter).

On the document ready, I will load the stringified JSON from the localStorage, and set that as the grid option.

However, I wasn't able to get the table to load properly in a few instances.

1.) When I enter something in the searchbar, the rows will be filtered via the searchbar. 

But if I do sorting to save the grid option and reload it, the following happens:
- The loaded table did not show the previous search item on the searchbar.
- The column filters (with checkbox) only show the filtered list, not the whole list.

I have to manually type in another placeholder text into the searchbar, then remove the placeholder text to "refresh" the table to get the whole list appearing in the column filter.

2.) When I filter some row via the column filter (with checkbox), the rows will be filtered.

But if I do sorting to save the grid option and reload it, the following happens:
- The column filters (with checkbox) only show filtered list, not the whole list.
- When I unselect, the table shows all the rows, but the column filter still doesn't show the whole list, only the previously preselected list.

Can you advise how to get state persistence working with searchbar and column filters with checkbox?

Thanks,
Luke

[Aleksandar]

Hello Luke,

1) When you type something in the search box the Grid essentially filters the dataSource based on this value. While the filters are preserved this arbitrary input is not as it is not part of the configuration of the Grid(you could set initial filters, for example). You could persist this value and on restoring the options assign it to the searchbox.

 2) Without the Grid configuration I cannot be certain on why the behavior occurs, but to make sure all options are available for the checkboxes set a DataSource for the multi check filter.

@using Kendo.Mvc.UI
<a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base"  id="save">Save State</a>
<a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base" id="load">Load State</a>

    @( Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                //when ServerOperations of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check columns
                columns.Bound(e => e.FirstName).Width(220).Filterable(ftb => ftb.Multi(true).Search(true)
                    .DataSource(ds => ds.Read(r => r.Action("Unique", "Grid").Data("{ field: 'FirstName' }")))
                );
                columns.Bound(e => e.LastName).Width(220).Filterable(ftb => ftb.Multi(true)
                    .DataSource(ds => ds.Read(r => r.Action("Unique", "Grid").Data("{ field: 'LastName' }")))
                );
                columns.Bound(e => e.Country).Width(220).Filterable(ftb => ftb.Multi(true).ItemTemplate("itemTemplate")
                    .DataSource(ds => ds.Read(r => r.Action("Unique", "Grid").Data("{ field: 'Country' }")))
                );
                columns.Bound(e => e.City).Width(220).Filterable(ftb => ftb.Multi(true).CheckAll(false).BindTo(new[]{
                        new { City = "Seatle" },
                        new { City = "Tacoma" },
                        new { City = "Kirkland" },
                        new { City = "Redmond" },
                        new { City = "London" }
                }));
                columns.Bound(e => e.Title).Filterable(ftb => ftb.Multi(true)
                    .DataSource(ds => ds.Read(r => r.Action("Unique", "Grid").Data("{ field: 'Title' }")))
                );
            })
            .ToolBar(t=>t.Search())
            .Sortable()
            .Pageable()
            .Filterable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(true)
                .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
            )
    )

<script type="text/javascript">
        function itemTemplate(e) {
            if (e.field == "all") {
                //handle the check-all checkbox template
                return "<div><label><strong><input type='checkbox' />#= all#</strong></label></div>";
            } else {
                //handle the other checkboxes
                return "<span><label><input type='checkbox' name='" + e.field + "' value='#=Country#'/><span>#= Country #</span></label></span>"
            }
        }

        function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            }
        }

    $(document).ready( function () {
        var grid = $("#grid").data("kendoGrid");

        $("#save").click(function (e) {
            e.preventDefault();
            var options = grid.getOptions();
            options.filterValue = $(".k-grid-search > .k-input-inner").val();
            localStorage["kendo-grid-options"] = kendo.stringify(options);
        });

        $("#load").click(function (e) {
            e.preventDefault();
            var options = localStorage["kendo-grid-options"];
            if (options) {
                var parsedOptions = JSON.parse(options)
                grid.setOptions(parsedOptions);
                $(".k-grid-search > .k-input-inner").val(parsedOptions.filterValue)
            }
        });
    });
</script>

Here is a sample REPL demonstrating the above.

I hope this helps.

Regards,
Aleksandar
Progress Telerik