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
Clickevent of the custom Apply Filters button. - In the Event handler, get the
valuesof 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.readyscope (when returning to the application page), check if theSessionStoragehas any saved values for the MultiSelect components. If it has, use them to filter the Grid. - You can use the values held in the
SessionStorageto set them to their MultiSelect instances in thedocument.readyscope.
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>