Card Template

The Card View control allows you to customize layouts of its visual elements using the template technology. This example demonstrates how to use templates to create custom card layouts.

Nancy Davolio

Sales Representative
USA Seattle
507 - 20th Ave. E. Apt. 2A

Andrew Fuller

Vice President, Sales
USA Tacoma
908 W. Capital Way

Janet Leverling

Sales Representative
USA Kirkland
722 Moss Bay Blvd.

Margaret Peacock

Sales Representative
USA Redmond
4110 Old Redmond Rd.

Steven Buchanan

Sales Manager
UK London
14 Garrett Hill

Michael Suyama

Sales Representative
UK London
Coventry House Miner Rd.
<dx:BootstrapCardView runat="server" DataSourceID="EmployeesDataSource" EnableCardsCache="false">
    <CssClasses Card="animated-card" />
    <Columns>
        <dx:BootstrapCardViewBinaryImageColumn FieldName="Photo">
            <PropertiesBinaryImage ImageWidth="150px" ImageHeight="150px" />
        </dx:BootstrapCardViewBinaryImageColumn>
        <dx:BootstrapCardViewColumn FieldName="FirstName" />
        <dx:BootstrapCardViewColumn FieldName="LastName" />
        <dx:BootstrapCardViewColumn FieldName="FullName" UnboundType="String" UnboundExpression="[FirstName] + ' ' + [LastName]" />
        <dx:BootstrapCardViewColumn FieldName="Title" />
        <dx:BootstrapCardViewColumn FieldName="Country" />
        <dx:BootstrapCardViewColumn FieldName="City" />
        <dx:BootstrapCardViewColumn FieldName="Location" UnboundType="String" UnboundExpression="[Country] + ' ' + [City]" />
        <dx:BootstrapCardViewColumn FieldName="Address" />
    </Columns>
    <Templates>
        <Card>
            <dx:BootstrapBinaryImage ID="Photo" runat="server" Value='<%# Eval("Photo") %>' />
            <div class="info">
                <p><%# Eval("FullName") %></p>
                <span><%# Eval("Title") %></span>
                <div class="address">
                    <span><%# Eval("Location") %></span>
                    <br />
                    <span><%# Eval("Address") %></span>
                </div>
            </div>
        </Card>
    </Templates>
</dx:BootstrapCardView>

Data Attributes in Header

This demo demonstrates the use of the data-toggle attribute to declaratively assign an action to a control displayed within a header template. In this demo, an <a> element’s data-toggle attribute is set to cardview-column-sort to sort data by the column’s values and a button's data-toggle attribute is set to cardview-column-filterpopup to show the header filter popup.

Company Name
Contact Name
Country
City
Address
Alfreds Futterkiste
Maria Anders
Germany
Berlin
Obere Str. 57
Ana Trujillo Emparedados y helados
Ana Trujillo
Mexico
México D.F.
Avda. de la Constitución 2222
<dx:BootstrapCardView runat="server" KeyFieldName="CustomerID" DataSourceID="DataSourceDataToggleInColumns">
    <Settings ShowHeaderPanel="true" ShowHeaderFilterButton="true" />
    <Templates>
        <Header>
            <div>
                <a data-toggle="cardview-column-sort" aria-label="First Name header column. Sorted ascending" href="javascript:;"><%# Container.Column.Caption %></a>
                <div>
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="cardview-column-filterpopup">
                        <%# GetCurrentFilter(Container.Column as BootstrapCardViewColumn) %>
                        <span class="caret"></span>
                    </button>
                </div>
            </div>
        </Header>
    </Templates>
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="CompanyName" Caption="Company Name"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewColumn FieldName="ContactName" Caption="Contact Name"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewColumn FieldName="Country" Caption="Country"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewColumn FieldName="City" Caption="City"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewColumn FieldName="Address" Caption="Address"></dx:BootstrapCardViewColumn>
    </Columns>
</dx:BootstrapCardView>
protected string GetCurrentFilter(BootstrapCardViewColumn column) {
    return string.IsNullOrEmpty(column.FilterExpression) ? "Filter" : column.FilterExpression;
}

Data Attributes in Card

This demo demonstrates the use of the data-toggle attribute to declaratively assign an action to a control displayed within a data item template. In this demo, each data row displays custom Edit and Delete buttons. The Edit button's data-toggle attribute is set to cardview-card-edit allowing the button to start editing the current card on click. Likewise, the Delete button's data-toggle attribute is set to cardview-card-delete allowing the button to delete the current card. Additionally, the Title Panel template contains a custom button whose data-toggle attribute is set to cardview-newcard allowing the button to create a new card.

Customers
Alfreds Futterkiste
Maria Anders
Berlin
Germany
Obere Str. 57
 
Ana Trujillo Emparedados y helados
Ana Trujillo
México D.F.
Mexico
Avda. de la Constitución 2222
 
<dx:BootstrapCardView runat="server" KeyFieldName="CustomerID" DataSourceID="DataSourceDataToggleInRows">
    <Columns>
        <dx:BootstrapCardViewColumn FieldName="CompanyName">
            <DataItemTemplate>
                <%# Eval("CompanyName") %>
                <button type="button" class="btn btn-link" data-toggle="cardview-card-edit">
                    <span class="fa fa-pencil-alt"></span>
                </button>
                <button type="button" class="btn btn-link" data-toggle="cardview-card-delete">
                    <span class="fa fa-trash"></span>
                </button>
            </DataItemTemplate>
        </dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewColumn FieldName="ContactName"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewColumn FieldName="Country"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewColumn FieldName="City"></dx:BootstrapCardViewColumn>
        <dx:BootstrapCardViewColumn FieldName="Address"></dx:BootstrapCardViewColumn>
    </Columns>
    <CardLayoutProperties>
        <Items>
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="CompanyName" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="ContactName" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="City" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="Country" />
            <dx:BootstrapCardViewColumnLayoutItem ColumnName="Address" />
            <dx:BootstrapEditModeCommandLayoutItem></dx:BootstrapEditModeCommandLayoutItem>
        </Items>
    </CardLayoutProperties>
    <Settings ShowTitlePanel="true" />
    <Templates>
        <TitlePanel>
            Customers
            <button type="button" class="btn btn-link" data-toggle="cardview-newcard">
                <span class="fa fa-plus"></span>
            </button>
        </TitlePanel>
    </Templates>
    <SettingsDataSecurity AllowDelete="true" AllowEdit="true" AllowInsert="true" />
</dx:BootstrapCardView>
Screen Size
Color Themes
Demo QR Code