Focusing
When the SettingsBehavior.AllowFocusedCard is set to true, one of the cards in the Card View control is focused. You can use this feature in multiple ways, for example, to display additional information for the focused card.
An end-user can move focus to another card by clicking it. Handle the FocusedCardChanged event to respond to changing card focus.
You can programmatically change card focus using the following API:
Set the focused card index to -1 on the client or server-side to reset a focused card.
<dx:BootstrapCardView runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID">
<Settings ShowCardHeader="true" />
<SettingsBehavior AllowFocusedCard="true" />
<ClientSideEvents FocusedCardChanged="onFocusedCardChanged" />
<Columns>
<dx:BootstrapCardViewColumn FieldName="ContactName" Visible="false" />
<dx:BootstrapCardViewColumn FieldName="CompanyName" />
<dx:BootstrapCardViewColumn FieldName="Country" />
<dx:BootstrapCardViewColumn FieldName="City" />
</Columns>
<Templates>
<CardHeader><%# Eval("ContactName") %></CardHeader>
</Templates>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
function onFocusedCardChanged(s, e) {
$("#focusedRowLabel").html("Focused card index: " + s.GetFocusedCardIndex());
}
Selection
When card selection is enabled, the Card View control allows end-users to select cards by clicking them or enabling selection checkboxes.
To show selection checkboxes within a layout item, set a layout item's ShowSelectCheckBox property to true.
Set the SettingsBehavior.AllowSelectByCardClick property to true to enable row selection via mouse click. Once set, clicking any card clears the previous selection and selects this card.
To select multiple cards, click the desired rows while holding down the Ctrl key. Clicking a card in this manner toggles its selected state and preserves the selection. To select contiguous cards, click the first row you wish to select, hold down the Shift key, and click the last row. You can continue customizing the selection by clicking individual cards while holding down the Ctrl key.
<dx:BootstrapCardView runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID">
<SettingsBehavior AllowSelectByCardClick="true" />
<ClientSideEvents Init="onSelectionCardViewAction" SelectionChanged="onSelectionCardViewAction" EndCallback="onSelectionCardViewAction" />
<Columns>
<dx:BootstrapCardViewColumn FieldName="ContactName" />
<dx:BootstrapCardViewColumn FieldName="CompanyName" />
<dx:BootstrapCardViewColumn FieldName="Country" />
<dx:BootstrapCardViewColumn FieldName="City" />
</Columns>
<CardLayoutProperties>
<Items>
<dx:BootstrapCardViewCommandLayoutItem ShowSelectCheckbox="true" HorizontalAlign="Right" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="ContactName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="CompanyName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="Country" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="City" />
</Items>
</CardLayoutProperties>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
function onSelectionCardViewAction(s, e) {
$("#selectionLabel").html("Total cards selected: " + s.GetSelectedCardCount());
}
Selection API
The Card View control provides a client-side API allowing you to programmatically manipulate card selection and obtain information about the currently selected card.
The CardView.Selection object represents an API to manipulate selection on the server-side.
<dx:BootstrapCardView ID="CardViewSelectionAPI" runat="server" ClientInstanceName="cards" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID"
OnCustomJSProperties="CardViewSelectionAPI_CustomJSProperties">
<ClientSideEvents Init="onUpdateSelection" SelectionChanged="onUpdateSelection" EndCallback="onUpdateSelection" />
<Columns>
<dx:BootstrapCardViewColumn FieldName="ContactName" />
<dx:BootstrapCardViewColumn FieldName="CompanyName" />
<dx:BootstrapCardViewColumn FieldName="Country" />
<dx:BootstrapCardViewColumn FieldName="City" />
</Columns>
<CardLayoutProperties>
<Items>
<dx:BootstrapCardViewCommandLayoutItem ShowSelectCheckbox="true" HorizontalAlign="Right" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="ContactName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="CompanyName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="Country" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="City" />
</Items>
</CardLayoutProperties>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
protected void CardViewSelectionAPI_CustomJSProperties(object sender, ASPxCardViewClientJSPropertiesEventArgs e) {
e.Properties["cpVisibleRowCount"] = CardViewSelectionAPI.VisibleCardCount;
}
function onSelectAllCardsClick() {
cards.SelectCards();
}
function onSelectAllCardsOnPageClick() {
cards.SelectAllCardsOnPage();
}
function onClearSelectionClick() {
cards.UnselectCards();
}
function onUpdateSelection(s, e) {
btnSelectAllCards.SetEnabled(s.GetSelectedCardCount() < s.cpVisibleRowCount);
btnClearSelection.SetEnabled(s.GetSelectedCardCount() > 0);
btnSelectAllCardsOnPage.SetEnabled(s.GetSelectedKeysOnPage().length < s.GetVisibleCardsOnPage());
$("#info4").html("Total cards selected: " + s.GetSelectedCardCount());
}