Search Panel
The Card 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.
<dx:BootstrapCardView runat="server" DataSourceID="CustomersDataSource">
<SettingsSearchPanel Visible="true" ShowApplyButton="true" />
<Columns>
<dx:BootstrapCardViewColumn FieldName="ContactName" />
<dx:BootstrapCardViewColumn FieldName="CompanyName" />
<dx:BootstrapCardViewColumn FieldName="Address" />
<dx:BootstrapCardViewColumn FieldName="City" />
<dx:BootstrapCardViewColumn FieldName="Country" />
<dx:BootstrapCardViewColumn FieldName="Phone" />
</Columns>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
The Card 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.
Note that the Card View control does not display column headers by default. To enable column headers, set the Settings.ShowHeaderPanel property to true.
<dx:BootstrapCardView runat="server" DataSourceID="CompaniesOrdersDataSource">
<Settings ShowHeaderFilterButton="true" ShowHeaderPanel="true"/>
<Columns>
<dx:BootstrapCardViewDateColumn FieldName="OrderDate" />
<dx:BootstrapCardViewTextColumn FieldName="CompanyName" />
<dx:BootstrapCardViewTextColumn FieldName="Country" />
<dx:BootstrapCardViewTextColumn FieldName="City" />
<dx:BootstrapCardViewTextColumn FieldName="UnitPrice">
<PropertiesTextEdit DisplayFormatString="c" />
</dx:BootstrapCardViewTextColumn>
<dx:BootstrapCardViewTextColumn FieldName="Discount">
<PropertiesTextEdit DisplayFormatString="p0" />
</dx:BootstrapCardViewTextColumn>
</Columns>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
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:BootstrapCardView runat="server"
KeyFieldName="ProductID" DataSourceID="SuppliersProductsDataSource">
<Settings ShowHeaderFilterButton="true" ShowHeaderPanel="true"/>
<Columns>
<dx:BootstrapCardViewDateColumn FieldName="ProductName">
<SettingsHeaderFilter Mode="CheckedList" />
</dx:BootstrapCardViewDateColumn>
<dx:BootstrapCardViewTextColumn FieldName="CategoryName">
<SettingsHeaderFilter Mode="CheckedList" />
</dx:BootstrapCardViewTextColumn>
<dx:BootstrapCardViewTextColumn FieldName="CompanyName" Caption="Supplier">
<SettingsHeaderFilter Mode="CheckedList" />
</dx:BootstrapCardViewTextColumn>
<dx:BootstrapCardViewTextColumn FieldName="UnitPrice">
<SettingsHeaderFilter Mode="CheckedList" />
<PropertiesTextEdit DisplayFormatString="c" />
</dx:BootstrapCardViewTextColumn>
</Columns>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
Header Filter - Custom Values
The Card 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.
- e.Values - A list of column header filter items.
- e.AddValue - Adds a new item to the list of header filter items. The Criteria Language Syntax help topic describes the filter expression syntax.
- e.AddShowAll - Adds the 'All' item to the header filter.
<dx:BootstrapCardView ID="CardViewAdvancedFiltering" runat="server" KeyFieldName="OrderID" DataSourceID="CompaniesOrdersDataSource"
OnHeaderFilterFillItems="CardViewAdvancedFiltering_HeaderFilterFillItems">
<Settings ShowHeaderFilterButton="true" ShowHeaderPanel="true"/>
<Columns>
<dx:BootstrapCardViewDateColumn FieldName="OrderDate">
<Settings AllowHeaderFilter="False" />
</dx:BootstrapCardViewDateColumn>
<dx:BootstrapCardViewTextColumn FieldName="UnitPrice">
<Settings AllowHeaderFilter="False" />
<PropertiesTextEdit DisplayFormatString="c" />
</dx:BootstrapCardViewTextColumn>
<dx:BootstrapCardViewColumn FieldName="Quantity" />
<dx:BootstrapCardViewTextColumn FieldName="Discount">
<PropertiesTextEdit DisplayFormatString="p0" />
</dx:BootstrapCardViewTextColumn>
<dx:BootstrapCardViewTextColumn FieldName="Total" UnboundType="Decimal" UnboundExpression="UnitPrice * Quantity * (1 - Discount)">
<PropertiesTextEdit DisplayFormatString="c" />
</dx:BootstrapCardViewTextColumn>
</Columns>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
int QuantityFilterStep = 10;
int TotalFilterStep = 100;
protected void CardViewAdvancedFiltering_HeaderFilterFillItems(object sender, ASPxCardViewHeaderFilterEventArgs e) {
switch(e.Column.FieldName) {
case "Total":
PrepareTotalFilterItems(e);
break;
case "Quantity":
PrepareQuantityFilterItems(e);
break;
}
}
protected virtual void PrepareTotalFilterItems(ASPxCardViewHeaderFilterEventArgs e) {
e.Values.Clear();
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");
}
protected virtual void PrepareQuantityFilterItems(ASPxCardViewHeaderFilterEventArgs 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));
}
}
Sorting Data
An end-user can sort the Card View by clicking the header of a column by which data should be sorted. An arrow glyph indicates the sort order within the sorted column. The Card View can be sorted against multiple columns by clicking the required column headers while holding down the shift key.
The SettingsBehavior.AllowSort property defines whether the Card View can be sorted. The default value is true.
Note that the Card View control does not display column headers by default. To enable column headers, set the Settings.ShowHeaderPanel property to true.
<dx:BootstrapCardView runat="server" DataSourceID="CustomersDataSource">
<Settings ShowHeaderPanel="true"/>
<Columns>
<dx:BootstrapCardViewColumn FieldName="ContactName" SortIndex="0" SortOrder="Ascending" />
<dx:BootstrapCardViewColumn FieldName="CompanyName" />
<dx:BootstrapCardViewColumn FieldName="Country" />
<dx:BootstrapCardViewColumn FieldName="City" />
</Columns>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>