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 MVC

Description

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

Solution

The example below is implemented as per the following steps:

Implement a custom Apply Filters button along with the MultiSelect components that are separated from the Grid.
Use the Click event of the custom Apply Filters button.
In the Event handler, get the values of the MultiSelects.
Implement a custom logic creating a filter for the DataSource of the Telerik UI for ASP.NET MVC Grid by using the values of the MultiSelect components (step 2) and main logic OR.
Apply the filter from the previous step.
Save the values of the MultiSelect components to variables in the SessionStorage.
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.
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.

    @(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"))
            )
        )

    <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>

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

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also

Getting Started

Support Resources

Community