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
| 8/25/2015 | Alfreds Futterkiste | Germany | Berlin | $46.00 | 25% |
| 8/25/2015 | Alfreds Futterkiste | Germany | Berlin | $18.00 | 25% |
| 8/25/2015 | Alfreds Futterkiste | Germany | Berlin | $12.00 | 25% |
| 10/3/2015 | Alfreds Futterkiste | Germany | Berlin | $44.00 | 0% |
| 10/13/2015 | Alfreds Futterkiste | Germany | Berlin | $10.00 | 0% |
| 10/13/2015 | Alfreds Futterkiste | Germany | Berlin | $18.00 | 0% |
| 1/15/2016 | Alfreds Futterkiste | Germany | Berlin | $55.00 | 0% |
| 1/15/2016 | Alfreds Futterkiste | Germany | Berlin | $13.00 | 20% |
| 3/16/2016 | Alfreds Futterkiste | Germany | Berlin | $25.00 | 5% |
| 3/16/2016 | Alfreds Futterkiste | Germany | Berlin | $46.00 | 0% |
<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" />
<dx:BootstrapGridViewDataColumn FieldName="Country" />
<dx:BootstrapGridViewDataColumn FieldName="City" />
<dx:BootstrapGridViewTextColumn FieldName="UnitPrice">
<PropertiesTextEdit DisplayFormatString="c" />
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn FieldName="Discount">
<PropertiesTextEdit DisplayFormatString="p0" />
</dx:BootstrapGridViewTextColumn>
</Columns>
<SettingsPager NumericButtonCount="7"></SettingsPager>
</dx:BootstrapGridView>
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.
Additionally, an end-user can filter items displayed by the header filter dropdown by entering text in the filter editor above the list. This editor is shown by default. To hide it, set the Settings.ShowHeaderFilterListBoxSearchUI property to false.
You can set header filter settings for each data column using the column's Column.SettingsHeaderFilter property.
<dx:BootstrapGridView runat="server" KeyFieldName="OrderID" DataSourceID="CompaniesOrdersDataSource">
<Settings ShowHeaderFilterButton="true" />
<Columns>
<dx:BootstrapGridViewDateColumn FieldName="OrderDate" />
<dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
<dx:BootstrapGridViewDataColumn FieldName="Country" />
<dx:BootstrapGridViewDataColumn FieldName="City" />
<dx:BootstrapGridViewTextColumn FieldName="UnitPrice">
<SettingsHeaderFilter Mode="NumericRangePicker">
<NumericRangeSpinEditSettings DisplayFormatString="g" />
</SettingsHeaderFilter>
<PropertiesTextEdit DisplayFormatString="c" />
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn FieldName="Discount">
<PropertiesTextEdit DisplayFormatString="p0" />
</dx:BootstrapGridViewTextColumn>
</Columns>
<SettingsPager NumericButtonCount="7"></SettingsPager>
</dx:BootstrapGridView>
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.
<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>
<SettingsPager NumericButtonCount="7"></SettingsPager>
</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. Handle the BeforeHeaderFilterFillItems event to provide custom filter items instead of default ones or the HeaderFilterFillItems event - based on 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.
| 8/25/2015 | $46.00 | 15 | 25% | $517.50 |
| 8/25/2015 | $18.00 | 21 | 25% | $283.50 |
| 8/25/2015 | $12.00 | 2 | 25% | $18.00 |
| 10/3/2015 | $44.00 | 20 | 0% | $880.00 |
| 10/13/2015 | $10.00 | 6 | 0% | $60.00 |
| 10/13/2015 | $18.00 | 15 | 0% | $270.00 |
| 1/15/2016 | $55.00 | 15 | 0% | $825.00 |
| 1/15/2016 | $13.00 | 2 | 20% | $20.80 |
| 3/16/2016 | $25.00 | 16 | 5% | $380.00 |
| 3/16/2016 | $46.00 | 2 | 0% | $92.00 |
<dx:BootstrapGridView ID="GridViewAdvancedFiltering" runat="server" KeyFieldName="OrderID" DataSourceID="CompaniesOrdersDataSource" EnableRowsCache="false"
OnBeforeHeaderFilterFillItems="GridViewAdvancedFiltering_BeforeHeaderFilterFillItems" 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>
<SettingsPager NumericButtonCount="7"></SettingsPager>
</dx:BootstrapGridView>
int QuantityFilterStep = 10;
int TotalFilterStep = 100;
protected void GridViewAdvancedFiltering_BeforeHeaderFilterFillItems(object sender, BootstrapGridViewBeforeHeaderFilterFillItemsEventArgs e) {
if(e.Column.FieldName == "Total")
PrepareTotalFilterItems(e);
}
protected void GridViewAdvancedFiltering_HeaderFilterFillItems(object sender, BootstrapGridViewHeaderFilterEventArgs e) {
if(e.Column.FieldName == "Quantity")
PrepareQuantityFilterItems(e);
}
protected virtual void PrepareTotalFilterItems(BootstrapGridViewBeforeHeaderFilterFillItemsEventArgs e) {
e.AddShowAll();
for(int i = 0; i < 10; i++) {
double start = TotalFilterStep * i;
double end = start + TotalFilterStep - 0.01;
e.AddValue(string.Format("from {0:c} to {1:c}", start, end), "", string.Format("[Total] >= {0} and [Total] <= {1}", start, end));
}
e.AddValue(string.Format("> {0:c}", 1000), "", "[Total] > 1000");
e.Handled = true;
}
protected virtual void PrepareQuantityFilterItems(BootstrapGridViewHeaderFilterEventArgs e) {
int max = e.Values.Max(v => {
int value = 0;
if(int.TryParse(v.Value, out value))
return value;
return 0;
});
e.Values.Clear();
e.AddShowAll();
for(int i = 0; i < max / QuantityFilterStep + 1; i++) {
int start = QuantityFilterStep * i;
int end = start + QuantityFilterStep - 1;
e.AddValue(string.Format("from {0} to {1}", start, end), "", string.Format("[Quantity] >= {0} and [Quantity] <= {1}", start, end));
}
}
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.
| | | | |
| 8/25/2015 | Alfreds Futterkiste | Germany | $46.00 | |
| 8/25/2015 | Alfreds Futterkiste | Germany | $18.00 | |
| 8/25/2015 | Alfreds Futterkiste | Germany | $12.00 | |
| 10/3/2015 | Alfreds Futterkiste | Germany | $44.00 | |
| 10/13/2015 | Alfreds Futterkiste | Germany | $10.00 | |
| 10/13/2015 | Alfreds Futterkiste | Germany | $18.00 | |
| 1/15/2016 | Alfreds Futterkiste | Germany | $55.00 | |
| 1/15/2016 | Alfreds Futterkiste | Germany | $13.00 | |
| 3/16/2016 | Alfreds Futterkiste | Germany | $25.00 | |
| 3/16/2016 | Alfreds Futterkiste | Germany | $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>
<SettingsPager NumericButtonCount="7"></SettingsPager>
</dx:BootstrapGridView>