Persist Separated MultiSelect Filters for a Telerik UI Grid in the SessionStorage

Environment

Product Version	2022.2.802
Product	Grid for Progress® Telerik® UI for ASP.NET Core

Description

How to reload the filtered state of a Telerik UI for ASP.NET Core Grid applied from separated MultiSelect components?

Solution

The example below is implemented as per the following steps:

1. Implement a custom Apply Filters button along with the MultiSelect components that are separated from the Grid.
2. Use the Click event of the custom Apply Filters button.
3. In the Event handler, get the values of the MultiSelects.
4. Implement a custom logic creating a filter for the DataSource of the Telerik UI for ASP.NET Core Grid by using the values of the MultiSelect components (step 2) and main logic OR.
5. Apply the filter from the previous step.
6. Save the values of the MultiSelect components to variables in the SessionStorage.
7. For the document.ready scope (when returning to the application page), check if the SessionStorage has any saved values for the MultiSelect components. If it has, use them to filter the Grid.
8. You can use the values held in the SessionStorage to set them to their MultiSelect instances in the document.ready scope.

The following examples demonstrates the steps described above.

Index.cshtml

    @(Html.Kendo().MultiSelect()
          .Name("freight")
          .AutoClose(false)
          .Placeholder("Select Freights...")
          .BindTo(new List<decimal>() {10, 20, 30, 40, 50, 60, 70, 80, 90, 100})
    )
<br />
<br />

@(Html.Kendo().MultiSelect()
          .Name("shipName")
          .AutoClose(false)
          .Placeholder("Select ShipNames...")
          .BindTo(new List<string>() {
              "ShipName 1",
              "ShipName 2",
              "ShipName 3",
              "ShipName 4",
              "ShipName 5",
              "ShipName 6",
              "ShipName 7",
              "ShipName 8",
              "ShipName 9",
              "ShipName 10",
          })
    )

<br />
<br />

@(Html.Kendo().MultiSelect()
          .Name("shipCity")
          .AutoClose(false)
          .Placeholder("Select ShipCities...")
          .BindTo(new List<string>() {
              "ShipCity 1",
              "ShipCity 2",
              "ShipCity 3",
              "ShipCity 4",
              "ShipCity 5",
              "ShipCity 6",
              "ShipCity 7",
              "ShipCity 8",
              "ShipCity 9",
              "ShipCity 10",
          })
    )

<br />
<br />

@(Html.Kendo().Button()
        .Name("testButton")
        .HtmlAttributes( new {type = "button"} )
        .Content("Apply Filters")
        .Events(e => e.Click("onClick"))
        )

<br />
<br />

        @(Html.Kendo().Grid<TelerikMvcApp63.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity);
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:450px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )

JavaScript

    <script>
 function onClick() {
        var freights = $("#freight").data("kendoMultiSelect").value();
        var shipNames = $("#shipName").data("kendoMultiSelect").value();
        var shipCities = $("#shipCity").data("kendoMultiSelect").value();

        // Filter the Grid
        filterGrid(freights, shipNames, shipCities);

        // Save Multiselects in the SessionStorage
        sessionStorage.setItem('freights', freights);
        sessionStorage.setItem('shipNames', shipNames);
        sessionStorage.setItem('shipCities', shipCities);
    }

    function filterGrid(freights, shipNames, shipCities) {
        var gridDataSource = $("#grid").data("kendoGrid").dataSource;

        // Create custom filter with 'or' logic
        var _filter = { logic: "or", filters: [] };

        if (freights.length > 0) {
            for (var i = 0; i < freights.length; i++) {
                _filter.filters.push({ field: "Freight", operator: "eq", value: freights[i] });
            }
        }

        if (shipNames.length > 0) {
            for (var i = 0; i < shipNames.length; i++) {
                _filter.filters.push({ field: "ShipName", operator: "eq", value: shipNames[i] });
            }
        }

        if (shipCities.length > 0) {
            for (var i = 0; i < shipCities.length; i++) {
                _filter.filters.push({ field: "ShipCity", operator: "eq", value: shipCities[i] });
            }
        }

        // Apply the filter
        gridDataSource.filter(_filter);
    }

    $(document).ready(function () {
        var freights = sessionStorage.getItem('freights');
        var shipNames = sessionStorage.getItem('shipNames');
        var shipCities = sessionStorage.getItem('shipCities');

        var namesArr = shipNames.split(",");
        var citiesArr = shipCities.split(",");

        if (freights || shipNames || shipCities) {
                filterGrid(freights, namesArr, citiesArr);
        }

        var freightsMulti = $("#freight").data("kendoMultiSelect");
        var shipNamesMulti = $("#shipName").data("kendoMultiSelect");
        var shipCitiesMulti = $("#shipCity").data("kendoMultiSelect");

        freightsMulti.value(freights);
        shipNamesMulti.value(namesArr);
        shipCitiesMulti.value(citiesArr);
    })
    </script>

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base