Search Panel

The Grid View control allows you to filter data and highlight search results via an integrated easy-to-use Search Panel. To enable the Search Panel, set the SettingsSearchPanel.Visible property to true.

To use an external editor instead of the built-in search panel, assign the editor’s identifier to the SettingsSearchPanel.CustomEditorID property.

Drag a column header here to group by that column
Order DateCompany NameCountryCityUnit PriceDiscount
8/25/2015Alfreds FutterkisteGermanyBerlin$46.0025 %
8/25/2015Alfreds FutterkisteGermanyBerlin$18.0025 %
8/25/2015Alfreds FutterkisteGermanyBerlin$12.0025 %
10/3/2015Alfreds FutterkisteGermanyBerlin$44.000 %
10/13/2015Alfreds FutterkisteGermanyBerlin$10.000 %
10/13/2015Alfreds FutterkisteGermanyBerlin$18.000 %
1/15/2016Alfreds FutterkisteGermanyBerlin$55.000 %
1/15/2016Alfreds FutterkisteGermanyBerlin$13.0020 %
3/16/2016Alfreds FutterkisteGermanyBerlin$25.005 %
3/16/2016Alfreds FutterkisteGermanyBerlin$46.000 %
<dx:BootstrapGridView runat="server" KeyFieldName="OrderID" DataSourceID="CompaniesOrdersDataSource">
    <SettingsSearchPanel Visible="true" ShowApplyButton="true" />
    <Settings ShowGroupPanel="true" />
    <Columns>
        <dx:BootstrapGridViewDateColumn FieldName="OrderDate" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        ...
    </Columns>
</dx:BootstrapGridView>

Header Filter

The Grid View control provides a powerful data filtering mechanism that displays a dropdown list of all unique values within a column. Clicking the column header’s filter button invokes this dropdown list. Set the Settings.ShowHeaderFilterButton to true to show header filter buttons.

You can set header filter settings for each data column using the column’s Column.SettingsHeaderFilter property.

Order DateCompany NameCountryCityUnit PriceDiscount
8/25/2015Alfreds FutterkisteGermanyBerlin$46.0025 %
8/25/2015Alfreds FutterkisteGermanyBerlin$18.0025 %
8/25/2015Alfreds FutterkisteGermanyBerlin$12.0025 %
10/3/2015Alfreds FutterkisteGermanyBerlin$44.000 %
10/13/2015Alfreds FutterkisteGermanyBerlin$10.000 %
10/13/2015Alfreds FutterkisteGermanyBerlin$18.000 %
1/15/2016Alfreds FutterkisteGermanyBerlin$55.000 %
1/15/2016Alfreds FutterkisteGermanyBerlin$13.0020 %
3/16/2016Alfreds FutterkisteGermanyBerlin$25.005 %
3/16/2016Alfreds FutterkisteGermanyBerlin$46.000 %
<dx:BootstrapGridView runat="server" KeyFieldName="OrderID" DataSourceID="CompaniesOrdersDataSource">
    <Settings ShowHeaderFilterButton="true" />
    <Columns>
        ...
    </Columns>
</dx:BootstrapGridView>

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 by setting the column's SettingsHeaderFilter.Mode property to GridHeaderFilterMode.CheckedList.

Product NameCategory NameSupplierUnit 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
<dx:BootstrapGridView runat="server" KeyFieldName="ProductID" DataSourceID="SuppliersProductsDataSource">
    <Settings ShowHeaderFilterButton="true" />
    <Columns>
        <dx:BootstrapGridViewDateColumn FieldName="ProductName">
            <SettingsHeaderFilter Mode="CheckedList" />
        </dx:BootstrapGridViewDateColumn>
        <dx:BootstrapGridViewDataColumn FieldName="CategoryName">
            <SettingsHeaderFilter Mode="CheckedList" />
        </dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" Caption="Supplier">
            <SettingsHeaderFilter Mode="CheckedList" />
        </dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewTextColumn FieldName="UnitPrice">
            <SettingsHeaderFilter Mode="CheckedList" />
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
    </Columns>
</dx:BootstrapGridView>

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, handle the HeaderFilterFillItems event. The event argument contains 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.

Order DateUnit PriceQuantityDiscountTotal
8/25/2015$46.001525 %$517.50
8/25/2015$18.002125 %$283.50
8/25/2015$12.00225 %$18.00
10/3/2015$44.00200 %$880.00
10/13/2015$10.0060 %$60.00
10/13/2015$18.00150 %$270.00
1/15/2016$55.00150 %$825.00
1/15/2016$13.00220 %$20.80
3/16/2016$25.00165 %$380.00
3/16/2016$46.0020 %$92.00
<dx:BootstrapGridView ID="GridViewAdvancedFiltering" runat="server" KeyFieldName="OrderID" DataSourceID="CompaniesOrdersDataSource" EnableRowsCache="false"
    OnHeaderFilterFillItems="GridViewAdvancedFiltering_HeaderFilterFillItems">
    <Settings ShowHeaderFilterButton="true" />
    <Columns>
        <dx:BootstrapGridViewDateColumn FieldName="OrderDate">
            <Settings AllowHeaderFilter="False" />
        </dx:BootstrapGridViewDateColumn>
        <dx:BootstrapGridViewTextColumn FieldName="UnitPrice">
            <Settings AllowHeaderFilter="False" />
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Quantity" />
        <dx:BootstrapGridViewTextColumn FieldName="Discount">
            <PropertiesTextEdit DisplayFormatString="p0" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewTextColumn FieldName="Total" UnboundType="Decimal" UnboundExpression="UnitPrice * Quantity * (1 - Discount)">
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
    </Columns>
</dx:BootstrapGridView>

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.

Set the Settings.ShowFilterRow property to true to display the filter row within the Grid View.

You can hide a filter editor for a certain column using the DataColumn.Settings.AllowAutoFilter property.

Company NameCountryUnit Price#
Alfreds FutterkisteGermany$46.00 
Alfreds FutterkisteGermany$18.00 
Alfreds FutterkisteGermany$12.00 
Alfreds FutterkisteGermany$44.00 
Alfreds FutterkisteGermany$10.00 
Alfreds FutterkisteGermany$18.00 
Alfreds FutterkisteGermany$55.00 
Alfreds FutterkisteGermany$13.00 
Alfreds FutterkisteGermany$25.00 
Alfreds FutterkisteGermany$46.00 
<dx:BootstrapGridView runat="server" KeyFieldName="OrderID" DataSourceID="CompaniesOrdersDataSource">
    <Settings ShowFilterRow="true" ShowFilterRowMenu="true" ShowFilterRowMenuLikeItem="true"/>
    <SettingsBehavior FilterRowMode="OnClick"  />
    <Columns>
        <dx:BootstrapGridViewDateColumn FieldName="OrderDate">
        </dx:BootstrapGridViewDateColumn>
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewComboBoxColumn FieldName="Country" >
            <PropertiesComboBox TextField="CountryName" ValueField="CountryName" EnableSynchronization="False"
                IncrementalFilteringMode="StartsWith" DataSourceID="CountriesDataSource">
            </PropertiesComboBox>
        </dx:BootstrapGridViewComboBoxColumn>
        <dx:BootstrapGridViewTextColumn FieldName="UnitPrice">
            <PropertiesTextEdit DisplayFormatString="c" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewCommandColumn ShowClearFilterButton="true" ShowApplyFilterButton="true" />
    </Columns>
</dx:BootstrapGridView>
Screen Size
Color Themes
Demo QR Code