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.

Maria Anders
Alfreds Futterkiste
Obere Str. 57
Berlin
Germany
030-0074321
Ana Trujillo
Ana Trujillo Emparedados y helados
Avda. de la Constitución 2222
México D.F.
Mexico
(5) 555-4729
<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>
</dx:BootstrapCardView>

Header Filter

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.

8/25/2015
Alfreds Futterkiste
Germany
Berlin
$46.00
25 %
8/25/2015
Alfreds Futterkiste
Germany
Berlin
$18.00
25 %
<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>
</dx:BootstrapCardView>

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.

Chai
Beverages
Exotic Liquids
$18.00
Chang
Beverages
Exotic Liquids
$19.00
<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>
</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.
8/25/2015
$46.00
15
25 %
$517.50
8/25/2015
$18.00
21
25 %
$283.50
<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>
</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.

Alejandra Camino
Romero y tomillo
Spain
Madrid
Alexander Feuer
Morgenstern Gesundkost
Germany
Leipzig
<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>
</dx:BootstrapCardView>
Screen Size
Color Themes
Demo QR Code