New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Use MultiSelect as Filter in Grids

Environment

Product	Telerik UI for ASP.NET MVC MultiSelect, Telerik UI for ASP.NET MVC Grid
Product Version	Created with version 2024.4.1112

Description

How can I use the MultiSelect as a filter in the default column filter menu of the Grid?

Solution

Remove the second filter input in the default column filter menu using the Extra(false) option of the Filterable configuration.
Use the UI option of the Filterable configuration and pass the name of the JavaScript function (multiselectFilter) that will create the MultiSelect.
Within the multiselectFilter function, initialize the MultiSelect editor and remove the default DropDownList editor with jQuery. Also, handle the submit event of the column filter menu, prevent its default action, and filter the Grid based on the selected options in the MultiSelect.
The Grid is configured for remote data binding, and all data operations are performed server-side. As a result, when you call the filter() method of the DataSource, the filter expression will be sent to the server. Intercept the applied filters through the request object and filter the data as demonstrated in the Read action in the code snippet below.

Razor
	@(Html.Kendo().Grid<ViewModel>()
		.Name("grid")
		.Columns(columns =>
		{
			columns.Bound(e => e.ID);
			columns.Bound(e => e.Tags).Filterable(filterable => filterable.Extra(false)
					.Messages(m=> m.Info("Show items with value that contains"))
					.UI("multiselectFilter")
				)
				.ClientTemplate("#:Tags.join(',')#");
		})
		.Filterable()
		.DataSource(dataSource => dataSource
			.Ajax()
			.Read(read => read.Action("Read", "Home"))
		 )
	)
JS
	<script>
		function multiselectFilter(element) {
			element.removeAttr("data-bind");
			var dataSource = $("#grid").data("kendoGrid").dataSource; // Access the Grid's DataSource.
			var multiselect = element.kendoMultiSelect({ // Initialize the MultiSelect editor and specify its data.
				dataSource: ["Tag1", "Tag2", "Tag3"]
			}).data("kendoMultiSelect");

			var form = element.closest("form"); // Select the form of the filter menu.
			var popup = form.data("kendoPopup"); // Get a reference of the Popup component.
			form.find("[data-role=dropdownlist]").remove(); // Remove the default DropDownList editor.

			form.find("[type='submit']").click(function (e) { // Handle the "submit" event of the filter menu.
				e.preventDefault(); // Prevent its default action.
				e.stopPropagation();
				var filter = dataSource.filter() || { logic: "and", filters: [] }; // The current DataSource filters.
				var tags = multiselect.value(); // Get the selected MultiSelect options.
				removeFiltersForField(filter, "Tags"); // Remove duplicated filters, if any.
				if (tags.length) {
					filter.filters = filter.filters.concat($.map(tags, function (value) { // Update the existing filters with the selected MultiSelect options.
						return {
							operator: "eq",
							value: value,
							field: "Tags"
						}
					}));
				}
				dataSource.filter(filter); // Filter the Grid (the Read request will be triggered).
				popup.close(); // Close the column filter menu.
			}).end()
				.find("[type='reset']").click(function () {
					multiselect.value([]); // Reset the MultiSelect when the "Clear" button is clicked.
				});
		}

		function removeFiltersForField(expression, field) {
			if (expression.filters) {
				expression.filters = $.grep(expression.filters, function (filter) {
					removeFiltersForField(filter, field);
					if (filter.filters) {
						return filter.filters.length;
					} else {
						return filter.field != field;
					}
				});
			}
		}
	</script>
C#
	public ActionResult Read([DataSourceRequest] DataSourceRequest request)
	{
		List<object> tagFilters = new List<object>();
		GetMultiSelectFilter(request.Filters, tagFilters, "Tags");
		IQueryable<ViewModel> result = data.AsQueryable();
		if (tagFilters.Any())
		{
			result = result.Where(d => d.Tags.Any(t => tagFilters.Contains(t)));
		}
	
		return Json(result.ToDataSourceResult(request));
	}

	private void GetMultiSelectFilter(IList<IFilterDescriptor> filters, List<object> result, String member)
	{
		for (int i = filters.Count - 1; i >= 0; i--)
		{
			var filter = filters[i];
			if (filter is CompositeFilterDescriptor)
			{
				GetMultiSelectFilter(((CompositeFilterDescriptor)filter).FilterDescriptors, result, member);
			}
			else if (((Kendo.Mvc.FilterDescriptor)filter).Member == member)
			{
				filters.Remove(filter);
				result.Add(((Kendo.Mvc.FilterDescriptor)filter).Value);
			}
		}
	}

For the complete implementation of how to use the MultiSelect as a filter in a specified Grid column, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository.

Use MultiSelect as Filter in Grids

Environment

Description

Solution

More ASP.NET MVC Grid Resources

More ASP.NET MVC MultiSelect Resources

See Also