Search Panel

The Grid View control allows you to filter data and highlight search results using an integrated easy-to-use Search Panel. You can access the search panel settings using the SettingsSearchPanel method. The following settings are available:

The client-side ApplySearchPanelFilter method sets the search text on the client-side.

To prevent a particular column from being filtered using the search panel, call the column's AllowFilterBySearchPanel method (available through the column's Settings method).

Drag a column header here to group by that column
Order Date Company Name Country City Unit Price Discount
7/4/2014Vins et alcools ChevalierFranceReims$14.000 %
7/4/2014Vins et alcools ChevalierFranceReims$10.000 %
7/4/2014Vins et alcools ChevalierFranceReims$35.000 %
7/5/2014Toms SpezialitätenGermanyMünster$19.000 %
7/5/2014Toms SpezialitätenGermanyMünster$42.000 %
7/8/2014Hanari CarnesBrazilRio de Janeiro$8.000 %
7/8/2014Hanari CarnesBrazilRio de Janeiro$42.0015 %
7/8/2014Hanari CarnesBrazilRio de Janeiro$17.0015 %
7/8/2014Victuailles en stockFranceLyon$17.005 %
7/8/2014Victuailles en stockFranceLyon$16.005 %
@(Html.DevExpress()
    .BootstrapGridView("searchPanelGridView")
    .KeyFieldName("OrderID")
    .SettingsSearchPanel(settings => settings
        .Visible(true)
        .ShowApplyButton(true))
    .Settings(settings => settings
        .ShowGroupPanel(true))
    .Columns(columns => {
        columns.Add().FieldName("OrderDate");
        columns.Add().FieldName("CompanyName");
        columns.Add().FieldName("Country");
        columns.Add().FieldName("City");
        columns.AddTextColumn()
            .FieldName("UnitPrice")
            .PropertiesTextEdit(properties => properties
                .DisplayFormatString("c"));
        columns.AddTextColumn()
            .FieldName("Discount")
            .PropertiesTextEdit(properties => properties
                .DisplayFormatString("p0"));
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewSearchPanel")
            .Controller("GridView")))
    .SettingsPager(settings => settings
        .NumericButtonCount(7))
    .Bind(Model))
using DevExpress.AspNetCore.DemoModels;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public GridViewController(NorthwindContext northwindContext) {
            NorthwindContext = northwindContext;
        }
        protected NorthwindContext NorthwindContext { get; }
        public ActionResult GridViewSearchPanel() {
            return PartialView("Filtering/GridViewSearchPanel", NorthwindContext.GetInvocesSummary());
        }
    }
}

Header Filter

The Grid View control provides a powerful data filtering mechanism that displays a drop-down list of all unique values within a column. Clicking the column header’s filter button invokes this drop-down list. Use the ShowHeaderFilterButton method (available through Settings) to show header filter buttons.

Additionally, an end-user can filter the header filter drop-down list’s items by entering text in the filter editor above the list. This editor is shown by default. To hide it, pass false to the ShowHeaderFilterListBoxSearchUI method (available through Settings).

You can set header filter settings for each data column:

Order Date
Company Name
Country
City
Unit Price
Discount
7/4/2014Vins et alcools ChevalierFranceReims$14.000 %
7/4/2014Vins et alcools ChevalierFranceReims$10.000 %
7/4/2014Vins et alcools ChevalierFranceReims$35.000 %
7/5/2014Toms SpezialitätenGermanyMünster$19.000 %
7/5/2014Toms SpezialitätenGermanyMünster$42.000 %
7/8/2014Hanari CarnesBrazilRio de Janeiro$8.000 %
7/8/2014Hanari CarnesBrazilRio de Janeiro$42.0015 %
7/8/2014Hanari CarnesBrazilRio de Janeiro$17.0015 %
7/8/2014Victuailles en stockFranceLyon$17.005 %
7/8/2014Victuailles en stockFranceLyon$16.005 %
@(Html.DevExpress()
    .BootstrapGridView("headerFilterGridView")
    .KeyFieldName("OrderID")
    .Settings(settings => settings.ShowHeaderFilterButton(true))
    .Columns(columns => {
        columns.Add().FieldName("OrderDate");
        columns.Add().FieldName("CompanyName");
        columns.Add().FieldName("Country");
        columns.Add().FieldName("City");
        columns.AddTextColumn()
            .FieldName("UnitPrice")
            .PropertiesTextEdit(properties => properties
                .DisplayFormatString("c"));
        columns.AddTextColumn()
            .FieldName("Discount")
            .PropertiesTextEdit(p => p
                .DisplayFormatString("p0"));
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewHeaderFilter")
            .Controller("GridView")))
    .SettingsPager(s => s
        .NumericButtonCount(7))
    .Bind(Model))
using DevExpress.AspNetCore.DemoModels;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public ActionResult GridViewHeaderFilter() {
            return PartialView("Filtering/GridViewHeaderFilter", NorthwindContext.GetInvocesSummary());
        }
    }
}

Header Filter - Checked List mode

The header filter can operate in CheckedList mode, in which it displays a check box list allowing an end-user to specify multiple filtering criteria. You can enable the CheckedList mode for a column's header filter using the Mode method (available for each column through the SettingsHeaderFilter method) with the GridHeaderFilterMode.CheckedList argument.

Product Name
Category
Supplier
Unit Price
ChaiBeveragesExotic Liquids$18.00
ChangBeveragesExotic Liquids$19.00
Aniseed SyrupCondimentsExotic Liquids$10.00
Chef Anton's Cajun SeasoningCondimentsNew Orleans Cajun Delights$22.00
Chef Anton's Gumbo MixCondimentsNew Orleans Cajun Delights$21.00
Grandma's Boysenberry SpreadCondimentsGrandma Kelly's Homestead$25.00
Uncle Bob's Organic Dried PearsProduceGrandma Kelly's Homestead$30.00
Northwoods Cranberry SauceCondimentsGrandma Kelly's Homestead$40.00
Mishi Kobe NikuMeat/PoultryTokyo Traders$97.00
IkuraSeafoodTokyo Traders$31.00
@(Html.DevExpress()
    .BootstrapGridView("headerFilterWithCheckedListMode")
    .KeyFieldName("ProductID")
    .Settings(settings => settings
        .ShowHeaderFilterButton(true))
    .Columns(columns => {
        columns.Add()
            .FieldName("ProductName")
            .SettingsHeaderFilter(settings => settings
                .Mode(GridHeaderFilterMode.CheckedList));
        columns.Add()
            .FieldName("Category")
            .SettingsHeaderFilter(settings => settings
                .Mode(GridHeaderFilterMode.CheckedList));
        columns.Add()
            .FieldName("Supplier")
            .SettingsHeaderFilter(settings => settings
                .Mode(GridHeaderFilterMode.CheckedList));
        columns.AddTextColumn()
            .FieldName("UnitPrice")
            .PropertiesTextEdit(properties => properties
                .DisplayFormatString("c"))
                .SettingsHeaderFilter(settings => settings
                    .Mode(GridHeaderFilterMode.CheckedList));
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewHeaderFilterWithCheckedListMode")
            .Controller("GridView")))
    .SettingsPager(settings => settings.NumericButtonCount(7))
    .Bind(Model))

Header Filter - Custom Values

The Grid View control allows you to create custom filter values, define filter criteria and display these values within the column's filter dropdown. To do this, pass a delegate that will add or edit required filter values to the OnHeaderFilterFillItems method. The delegate takes an argumen providing access to a list of predefined filter values, which contains a data column's unique values. These values are shown in the header filter popup by default. You can modify this list and fill it with custom items. Each filter value should have a title and filter expression.

In this demo, custom filter values are displayed within the 'Total' and 'Quantity' columns' filter dropdowns.

The Criteria Language Syntax help topic describes the filter expression syntax.
Order Date Unit Price Quantity
Discount
Total
7/4/2014$14.00120 %$168.00
7/4/2014$10.00100 %$100.00
7/4/2014$35.0050 %$175.00
7/5/2014$19.0090 %$171.00
7/5/2014$42.00400 %$1,680.00
7/8/2014$8.00100 %$80.00
7/8/2014$42.003515 %$1,249.50
7/8/2014$17.001515 %$216.75
7/8/2014$17.0065 %$96.90
7/8/2014$16.00155 %$228.00
@(Html.DevExpress()
    .BootstrapGridView("gridViewAdvancedFiltering")
    .KeyFieldName("OrderID")
    .Settings(settings => settings.ShowHeaderFilterButton(true))
    .Columns(columns => {
        columns.Add()
            .FieldName("OrderDate")
            .Settings(settings => settings
                .AllowHeaderFilter(false));
        columns.AddTextColumn().FieldName("UnitPrice")
            .Settings(settings => settings
                .AllowHeaderFilter(false))
            .PropertiesTextEdit(properties => properties
                .DisplayFormatString("C"));
        columns.Add().FieldName("Quantity");
        columns.AddTextColumn()
            .FieldName("Discount")
            .PropertiesTextEdit(properties => properties
                .DisplayFormatString("p0"));
        columns.AddTextColumn()
            .FieldName("Total")
            .UnboundType(UnboundColumnType.Decimal)
            .UnboundExpression("UnitPrice * Quantity * (1 - Discount)")
            .PropertiesTextEdit(properties => properties
                .DisplayFormatString("c"));
    })
    .OnHeaderFilterFillItems((grid, args) => {
        switch(args.Column.FieldName) {
            case "Total":
                args.Values = HeaderFilterViewModel.GetTotalColumnFilterValues();
                break;
            case "Quantity":
                args.Values = HeaderFilterViewModel.GetQuantityColumnFilterItems(args.Values);
                break;
        }
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("AdvancedFiltering")
            .Controller("GridView")))
    .SettingsPager(s => s
        .NumericButtonCount(7))
    .Bind(Model))
using DevExpress.AspNetCore.DemoModels;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public ActionResult AdvancedFiltering() {
            return PartialView("Filtering/AdvancedFiltering", NorthwindContext.GetInvocesSummary());
        }
    }
}
using DevExpress.AspNetCore.Bootstrap;
using System.Collections.Generic;
using System.Linq;

namespace DevExpress.AspNetCore.Demos {
    public static class HeaderFilterViewModel {
        const int QuantityFilterStep = 10;
        const int TotalFilterStep = 100;
        public static List<BootstrapGridHeaderFilterValue> GetQuantityColumnFilterItems(List<BootstrapGridHeaderFilterValue> items) {            
            int max = items.Max(v => int.TryParse(v.Value, out var value) ? value : 0);
            var result = new List<BootstrapGridHeaderFilterValue>();
            for(int i = 0; i < max / QuantityFilterStep + 1; i++) {
                int start = QuantityFilterStep * i;
                int end = start + QuantityFilterStep - 1;
                result.Add(new BootstrapGridHeaderFilterValue($"from {start} to {end}", "", $"[Quantity] >= {start} and [Quantity] <= {end}"));
            }
            return result;
        }
        public static List<BootstrapGridHeaderFilterValue> GetTotalColumnFilterValues() {
            var result = new List<BootstrapGridHeaderFilterValue>();
            for(int i = 0; i < 10; i++) {
                double start = TotalFilterStep * i;
                double end = start + TotalFilterStep - 0.01;
                result.Add(new BootstrapGridHeaderFilterValue($"from {start:c} to {end:c}", "", $"[Total] >= {start} and [Total] <= {end}"));
            }
            return result;
        }
    }
}

Data Filter Row

The filter row allows end-users to filter data by entering text within its cells. For total control over the values returned by the filter row, an optional filter row menu displays a list of filter conditions for a given search operation.

Use the ShowFilterRow method (available through Settings) with the true argument to display the filter row within the Grid View.

You can control filter row settings for each column using the following columns methods:

#Order Date Company Name Country City Unit Price Discount
 7/4/2014Vins et alcools ChevalierFranceReims$14.000 %
 7/4/2014Vins et alcools ChevalierFranceReims$10.000 %
 7/4/2014Vins et alcools ChevalierFranceReims$35.000 %
 7/5/2014Toms SpezialitätenGermanyMünster$19.000 %
 7/5/2014Toms SpezialitätenGermanyMünster$42.000 %
 7/8/2014Hanari CarnesBrazilRio de Janeiro$8.000 %
 7/8/2014Hanari CarnesBrazilRio de Janeiro$42.0015 %
 7/8/2014Hanari CarnesBrazilRio de Janeiro$17.0015 %
 7/8/2014Victuailles en stockFranceLyon$17.005 %
 7/8/2014Victuailles en stockFranceLyon$16.005 %
@model DataFilterRowViewModel
@(Html.DevExpress()
    .BootstrapGridView("dataFilterRow")
    .KeyFieldName("OrderID")
    .Settings(s => s
        .ShowFilterRow(true)
        .ShowFilterRowMenu(true)
        .ShowFilterRowMenuLikeItem(true))
    .SettingsBehavior(behavior => behavior.FilterRowMode(GridViewFilterRowMode.OnClick))
    .Columns(columns => {
        columns.AddCommandColumn()
            .ShowApplyFilterButton(true);
        columns.Add().FieldName("OrderDate");
        columns.Add().FieldName("CompanyName");
        columns.AddComboBoxColumn()
            .FieldName("Country")
            .PropertiesComboBox(p=>p
                .TextField("CountryName")
                .ValueField("CountryName")
                .IncrementalFilteringMode(IncrementalFilteringMode.StartsWith)
                .Bind(Model.Countries));
        columns.Add().FieldName("City");
        columns.AddTextColumn()
            .FieldName("UnitPrice")
            .PropertiesTextEdit(p => p
                .DisplayFormatString("c"));
        columns.AddTextColumn()
            .FieldName("Discount")
            .PropertiesTextEdit(p => p
                .DisplayFormatString("p0"));
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewDataFilterRow")
            .Controller("GridView")))
    .SettingsPager(s=>s
        .NumericButtonCount(7))
    .Bind(Model.Orders))
using DevExpress.AspNetCore.DemoModels;
using Microsoft.AspNetCore.Mvc;
using System.Collections;
using System.Linq;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public ActionResult GridViewDataFilterRow() {
            DataFilterRowViewModel model = new DataFilterRowViewModel((IEnumerable)NorthwindContext.GetInvocesSummary(), WorldCitiesContext.SortedCountries);
            return PartialView("Filtering/GridViewDataFilterRow", model);
        }
    }
}
Screen Size
Color Themes
Demo QR Code