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 Grid applied from separated MultiSelects?
Solution
The example below is implemented as per the following steps:
- Implement a Custom "Apply Filters" Button along with the separated from the Grid MultiSelects.
- Use the "Click" Event of the "Apply Filters" Custom 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 Grid by using the values of the MultiSelects(step 2) and main logic "or".
- Apply the filter(from point 4).
- Save the values of the MultiSelects to variables in the "SessionStorage".
- For the "document.ready" scope(when returning to the application page) - check if the SessionStorage has saved values of the MultiSelects. If yes - use them to filter the Grid.
- The held values in the SessionStorage could be used in order to set them to their MultiSelects instances in the document.ready scope.
- Here is an example:
@(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>