Selection
- 2 minutes to read
ASPxCardView allows end-users to change a selection using any of the following methods.
- By clicking cards, provided that the ASPxCardViewBehaviorSettings.AllowSelectByCardClick option is enabled.
By clicking the check boxes displayed within a card. To display check boxes, set the CardViewCommandLayoutItem.ShowSelectCheckbox property to true. Alternatively, you can use the “Show Select check Box” option within a grid’s Smart Tag menu.
Use the Select item within the card. To display this item, set the CardViewCommandLayoutItem.ShowSelectButton property to true.
ASPxCardView supports single and multiple card selection modes. You can switch the mode using a single option. To learn more, refer to the Multiple Card Selection topic.
To get the ASPxCardView‘s selection, use the ASPxCardView.Selection property. The object returned by this property provides methods that allow you to select and deselect individual cards or all cards, obtain the number of selected cards, etc.
ASPxCardView provides a comprehensive client-side API that enables you to manage a selection in the same manner as on the server side. All these methods are listed in Member Table: Selections.
To respond to selection changes, handle the ASPxGridBase.SelectionChanged server event, or the ASPxClientCardView.SelectionChanged client event.
Example
In this example, the ASPxClientCardView.SelectionChanged client-side event is handled to display selected contacts within the list box. Contact names are obtained using the ASPxClientCardView.GetSelectedFieldValues function.
The image below shows the result:
For more information, see ASPxCardView - Selection online demo.
function OnCardSelectionChanged(s, e) {
s.GetSelectedFieldValues("FirstName;LastName", GetSelectedFieldValuesCallback);
}
function GetSelectedFieldValuesCallback(values) {
selectionList.BeginUpdate();
try {
selectionList.ClearItems();
for (var i = 0; i < values.length; i++) {
selectionList.AddItem(values[i].join(' '));
}
} finally {
selectionList.EndUpdate();
}
document.getElementById("selCount").innerHTML = cardView.GetSelectedCardCount();
}
The style settings used to paint selected cards can be accessed and customized using the CardViewStyles.SelectedCard property.
Concepts
Member Table
Task-Based Help
- How to: Delete Selected Cards
- How to: Select Cards That Contain the Specified Value
- How to: Show Values of Selected Cards within a Listbox
- How to: Change the Visibility of Check Boxes in Multi-Selection Mode