aspnet-114089-components-card-view-visual-elements.md
This topic lists ASPxCardView elements that are displayed on-screen. Each section contains a screenshot that outlines a specific element with a brief overview of that element’s purpose. Additionally, each topic contains a list of settings that specify element visibility, content and appearance.
A Card represents an individual data source record. Cards contain data and command items.
The ASPxCardView’s Edit Form allows end users to edit cell values. It is displayed when a user clicks the Edit command item within the command column.
To manually validate an edited card in ASPxCardView , handle the ASPxCardView.CardValidating event. An error row is automatically displayed below the Edit Form if the event parameter’s CardError property is set to a non-empty string.
ASPxCardView’s Command items allow end users to select and delete cards, switch the card view to edit mode, update data, and much more. A command item represents a single command. The eight available command items are as follows: New , Edit , Delete , Select , Update , Clear , Apply and Cancel. The Delete item, for instance, allows users to delete cards. A command item is displayed as a link by default. It can also be a button or an image.
The Customization Window is shown within the ASPxCardView. To open the customization window, use the client ASPxClientCardView.ShowCustomizationWindow method.
The Filter Bar displays a string representation of the filter criteria applied to ASPxCardView. It also displays the following elements.
The Filter Builder (Filter Control) allows end users to build complex filter criteria with an unlimited number of filter conditions, combined by logical operators.
The ASPxCardView’s Header Panel allows end users to select values displayed within the drop-down header filters - to filter the records stored in the underlying dataset.
Column headers can display Excel-style filter buttons. When an end user clicks a filter button in ASPxCardView, a Header Filter popup window that lists unique values within the column is invoked. This filter allows users to apply filter criteria against the column.
The Header Filter can operate in the following modes: List, CheckedList, DateRangeCalendar, DateRangePicker, and NumericRangePicker. Use a column’s Mode property to specify the mode at the column level.
Enable CheckList Mode
Disable CheckList Mode
The Loading Panel is displayed within the ASPxCardView control while you wait for a callback response. The Loading Panel can be shown in a popup window.
or within the status bar.
The Pager enables end users to navigate through ASPxCardView data. It consists of navigation buttons (such as “next”, “last”, “previous”, “first”), and an indicator that displays the current page number, the total number of pages, and a page size item that allows users to specify the number of items displayed on a page.
The ASPxCardView’s Popup Edit Form allows end users to edit a card. It is displayed when an user clicks the Edit command item if the ASPxCardViewEditingSettings.Mode option is set to CardViewEditingMode.PopupEditForm.
Note
The popup edit form (ASPxPopupControl class instance) template cannot contain another popup element (ASPxPopupControl or ASPxDockPanel). Refer to the following help topic for more information: ASPxPopupControl limitations.
The Search Panel allows end users to filter data by typing filter criteria in the panel editor. The text that meets the filter condition is highlighted if the ASPxGridSearchPanelSettings.HighlightResults property is set to true.
The Status Bar is displayed at the bottom of ASPxCardView. It is used to display status information to end users.
A title panel is displayed at the top of ASPxCardView.
The Summary Panel is located at the bottom of the ASPxCardView. It is typically used to display summary information for the control.
The Toolbar can display frequently used standard and custom commands.
The table below lists the main members that affect element appearance and functionality.
| Characteristics | Members |
|---|---|
| Visibility | GridToolbar.Visible |
| Toolbar Item Content | MenuItem.Text, MenuItem.Image |
| Style | ASPxGridBase.StylesToolbar |
| Position | GridToolbar.Position |