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>
<SettingsPager ItemsPerPage="6"></SettingsPager>
<SettingsLayout CardColSpanLg="4" CardColSpanMd="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
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.
<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>
<SettingsPager ItemsPerPage="2" NumericButtonCount="6"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</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.
<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" />
<SettingsPager ItemsPerPage="2" NumericButtonCount="6"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>