Your search did not match any results.

Card View - Filter Panel

The filter panel UI element displays combined filter information on-screen. This filter is stored in the filterValue property and includes filters applied in other UI elements (header filter, filterBuilder).

Backend API
@model IEnumerable<DevExtreme.MVC.Demos.Models.CardView.FilterPanel.Order> @(Html.DevExtreme().CardView() .ID("cardView") .DataSource(Model, "ID") .CardsPerRow(Mode.Auto) .CardMinWidth(310) .HeaderFilter(hf => hf.Visible(true)) .FilterPanel(fp => fp.Visible(true)) .FilterValue( new object[] { new object[] {"Employee", "=", "Clark Morgan"}, "and", new object[] {"DeliveryDate", "weekends"} } ) .FilterBuilder(fb => { fb.CustomOperations(co => { co.Add() .Name("weekends") .Caption("Weekends") .DataTypes(new[] { FilterBuilderFieldDataType.Date }) .Icon("check") .HasValue(false) .CalculateFilterExpression("calculateWeekendFilterExpression"); }); }) .Columns(c => { c.Add() .DataField("OrderNumber") .HeaderFilter(hf => hf.GroupInterval(10000)); c.Add() .DataField("OrderDate") .DataType(GridColumnDataType.Date); c.Add() .DataField("DeliveryDate") .DataType(GridColumnDataType.Date); c.Add() .DataField("SaleAmount") .DataType(GridColumnDataType.Number) .HeaderFilter(hf => hf.DataSource(@<text> [{ text: 'Less than $3000', value: ['SaleAmount', '<', 3000], }, { text: '$3000 - $5000', value: [['SaleAmount', '>=', 3000], ['SaleAmount', '<', 5000]], }, { text: '$5000 - $10000', value: [['SaleAmount', '>=', 5000], ['SaleAmount', '<', 10000]], }, { text: '$10000 - $20000', value: [['SaleAmount', '>=', 10000], ['SaleAmount', '<', 20000]], }, { text: 'Greater than $20000', value: ['SaleAmount', '>=', 20000], }] </text>)); c.Add() .DataField("CustomerStoreCity") .Caption("City"); c.Add().DataField("Employee"); }) ) <script> function getOrderDay(rowData) { return (new Date(rowData.OrderDate)).getDay(); } function calculateWeekendFilterExpression() { return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]]; } </script>
using DevExtreme.MVC.Demos.Models.CardView.ColumnChooser; using DevExtreme.MVC.Demos.Models.CardView.ColumnHeaderFilter; using DevExtreme.MVC.Demos.Models.CardView.ColumnReordering; using DevExtreme.MVC.Demos.Models.CardView.DataValidation; using DevExtreme.MVC.Demos.Models.CardView.FilterPanel; using DevExtreme.MVC.Demos.Models.CardView.Overview; using DevExtreme.MVC.Demos.Models.CardView.PopupEditing; using DevExtreme.MVC.Demos.Models.CardView.SearchPanel; using DevExtreme.MVC.Demos.Models.CardView.Selection; using DevExtreme.MVC.Demos.Models.CardView.SimpleArray; using DevExtreme.MVC.Demos.Models.CardView.Sorting; using DevExtreme.MVC.Demos.Models.SampleData; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class CardViewController : Controller { public ActionResult FilterPanel() { return View(FilterPanelSampleData.Orders); } } }

To display the filter panel, set the filterPanel.visible property to true.

A click within the combined filter calls the integrated filter builder. You can configure its settings in the filterBuilder object. In this demo, this object is used to add beforeNoon and afterNoon custom filter operations.

The integrated filter builder displays in a DevExtreme Popup component. You can configure the filter builder popup with the filterBuilderPopup object.