Vue CardView API
CardView is a UI component that uses a "card" layout to present information.
See Also
jQuery
Angular
Vue
React
Props
A configuration object for the CardView UI component.
| Name | Description |
|---|---|
| accessKey | Specifies the shortcut key that sets focus on the UI component. |
| activeStateEnabled | Specifies whether the UI component changes its visual state as a result of user interaction. |
| allowColumnReordering | Specifies whether a user can reorder columns. |
| cardComponent | An alias for the cardTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| cardContentComponent | An alias for the cardContentTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| cardContentRender | An alias for the cardContentTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| cardContentTemplate | Specifies a custom template for card content. |
| cardCover | Configures the card cover. |
| cardFooterComponent | An alias for the cardFooterTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| cardFooterRender | An alias for the cardFooterTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| cardFooterTemplate | Specifies a custom template for a card footer. |
| cardHeader | Configures the card header. |
| cardMaxWidth | Specifies the maximum width of the card. |
| cardMinWidth | Specifies the minimum width of the card. |
| cardRender | An alias for the cardTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| cardsPerRow | Specifies the number of cards per row. |
| cardTemplate | Specifies a custom template for the card. |
| columnChooser | Configures the column chooser. |
| columns | An array of CardView columns. |
| dataSource | Binds the UI component to data. |
| disabled | Specifies whether the UI component responds to user interaction. |
| editing | Configures editing. |
| elementAttr | Specifies the global attributes to be attached to the UI component's container element. |
| errorRowEnabled | Indicates whether to show the error row. |
| fieldHintEnabled | Displays a hint when the mouse hovers over truncated field content. |
| filterBuilder | Configures the filter builder. |
| filterBuilderPopup | Configures the integrated filter builder popup. |
| filterPanel | Configures the filter panel. |
| filterValue | Specifies a filter expression. |
| focusStateEnabled | Specifies whether the UI component can be focused using keyboard navigation. |
| headerFilter | Configures the header filter. |
| headerPanel | Configures the header panel. |
| height | Specifies the UI component's height. |
| hint | Specifies text for a hint that appears when a user pauses on the UI component. |
| hoverStateEnabled | Specifies whether the UI component changes its appearance when a user hovers over it. |
| keyExpr | Specifies the key property (or properties) that supply key values to access data items. Each key value must be unique. This property applies only if data is a simple array. |
| loadPanel | Configures the load panel. |
| noDataComponent | An alias for the noDataTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information. |
| noDataRender | An alias for the noDataTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information. |
| noDataTemplate | Specifies a custom template to be displayed when no data appears in CardView. |
| noDataText | Specifies a text string to display when no data appears in CardView. |
| onCardClick | A function that is executed when a card is clicked or tapped. |
| onCardDblClick | A function that is executed when a card is double-clicked or double-tapped. |
| onCardHoverChanged | A function that is executed after the pointer enters or leaves a card. |
| onCardInserted | A function that is executed after a new card is inserted into the data source. |
| onCardInserting | A function that is executed before a new card is inserted into the data source. |
| onCardPrepared | A function that is executed after a card is created. |
| onCardRemoved | A function that is executed after a card was removed from the data source. |
| onCardRemoving | A function that is executed before a card is removed from the data source. |
| onCardSaved | A function that is executed after card changes are saved. |
| onCardSaving | A function that is executed before pending card changes are saved. |
| onCardUpdated | A function that is executed after a card is updated in the data source. |
| onCardUpdating | A function that is executed before a card is updated in the data source. |
| onContentReady | A function that is executed when the UI component is rendered and each time the component is repainted. |
| onContextMenuPreparing | A function that is executed before the context menu is rendered. |
| onDataErrorOccurred | A function that is executed when an error occurs in the data source. |
| onDisposing | A function that is executed before the UI component is disposed of. |
| onEditCanceled | A function that is executed after card changes are discarded. |
| onEditCanceling | A function that is executed when the edit operation is canceled, but card changes are not yet discarded. |
| onEditingStart | A function that is executed before a card switches to the editing state. |
| onFieldCaptionClick | A function that is executed when a field caption is clicked or tapped. |
| onFieldCaptionDblClick | A function that is executed when a field caption is double-clicked or double-tapped. |
| onFieldCaptionPrepared | A function that is executed after a field caption is created. |
| onFieldValueClick | A function that is executed when a field value is clicked or tapped. |
| onFieldValueDblClick | A function that is executed when a field value is double-clicked or double-tapped. |
| onFieldValuePrepared | A function that is executed after a field value is created. |
| onFocusedCardChanged | A function that is executed after the focused card changes. |
| onInitialized | A function used in JavaScript frameworks to save the UI component instance. |
| onInitNewCard | A function that is executed before a new card is added to the UI component. |
| onOptionChanged | A function that is executed after a UI component property is changed. |
| onSelectionChanged | A function that is executed when a card is selected or its selection is cleared. |
| pager | Configures the pager. |
| paging | Configures paging. |
| remoteOperations | Notifies CardView of the server's data processing operations. |
| rtlEnabled | Switches the UI component to a right-to-left representation. |
| scrolling | Configures scrolling. |
| searchPanel | Configures the search panel. |
| selectedCardKeys | Allows you to select cards or determine which cards are selected. |
| selection | Configures runtime selection. |
| sorting | Configures sorting. |
| tabIndex | Specifies the number of the element when the Tab key is used for navigating. |
| toolbar | Configures the toolbar. |
| visible | Specifies whether the UI component is visible. |
| width | Specifies the UI component's width. |
| wordWrapEnabled | Specifies whether text that does not fit into a field should be wrapped. |
See Also
Methods
| Name | Description |
|---|---|
| addCard() | Adds an empty card and switches it to the editing state. |
| beginCustomLoading(text) | Displays the load panel. |
| beginUpdate() | Postpones rendering that can negatively affect performance until the endUpdate() method is called. |
| byKey() | Gets a data object with a specific key. |
| cancelEditData() | Discards changes that a user made to data. |
| clearFilter() | Clears all filters applied to UI component cards. |
| clearSelection() | Clears selection of all cards on all pages. |
| clearSorting() | Clears sorting settings of all columns. |
| defaultOptions(rule) | Specifies the device-dependent default configuration properties for this component. |
| deleteCard(cardIndex) | Removes a card with a specific index. |
| deselectAll() | Clears the selection of all cards on all pages or the currently rendered page only. |
| deselectCards(keys) | Cancels the selection of cards with specific keys. |
| dispose() | Disposes of all the resources allocated to the CardView instance. |
| editCard(cardIndex) | Switches a card with a specific index to the editing state. |
| element() | Gets the root UI component element. |
| endCustomLoading() | Hides the load panel. |
| endUpdate() | Refreshes the UI component after a call of the beginUpdate() method. |
| focus() | Sets focus on the UI component. |
| getCardElement(cardIndex) | Gets the container of a card with a specific index. |
| getCardIndexByKey(key) | Gets the index of a card with a specific key. |
| getCombinedFilter() | Gets the total filter that combines all the filters applied. |
| getDataSource() | Gets the DataSource instance. |
| getInstance(element) | Gets the instance of a UI component found using its DOM node. |
| getKeyByCardIndex(cardIndex) | Gets the key of a card with a specific index. |
| getScrollable() | Gets the instance of the UI component's scrollable part. |
| getSelectedCardKeys() | Gets the selected card keys. |
| getSelectedCardsData() | Gets the selected cards' data objects. |
| getVisibleCards() | Gets currently rendered cards. |
| hasEditData() | Checks whether the UI component has unsaved changes. |
| hideColumnChooser() | Hides the column chooser. |
| instance() | Gets the UI component's instance. Use it to access other methods of the UI component. |
| isCardSelected(key) | Checks whether a card with a specific key is selected. |
| keyOf(obj) | Gets a data item's key value. |
| off(eventName) | Detaches all event handlers from a single event. |
| off(eventName, eventHandler) | Detaches a particular event handler from a single event. |
| on(eventName, eventHandler) | Subscribes to an event. |
| on(events) | Subscribes to events. |
| option() | Gets all UI component properties. |
| option(optionName) | Gets the value of a single property. |
| option(optionName, optionValue) | Updates the value of a single property. |
| option(options) | Updates the values of several properties. |
| pageCount() | Gets the total page count. |
| pageIndex() | Gets the current page index. |
| pageIndex(value) | Switches the UI component to a specific page using a zero-based index. |
| pageSize() | Gets the current page size. |
| pageSize(value) | Sets the page size. |
| registerKeyHandler(key, handler) | Registers a handler to be executed when a user presses a specific key. |
| repaint() | Renders the component again without reloading data. Use the method to update the component's markup and appearance dynamically. |
| resetOption(optionName) | Resets a property to its default value. |
| saveEditData() | Saves changes that a user made to data. |
| searchByText(text) | Searches for a string in columns whose allowSearch property is |
| selectAll() | Selects all cards. |
| selectCards(keys, preserve) | Selects cards with specific keys. |
| showColumnChooser() | Shows the column chooser. |
| totalCount() | Gets the total card count. |
Events
This section describes events fired by this UI component.
| Name | Description |
|---|---|
| cardClick | Raised when a card is clicked or tapped. |
| cardDblClick | Raised when a card is double-clicked or double-tapped. |
| cardHoverChanged | Raised after the pointer enters or leaves a card. |
| cardInserted | Raised after a new card is inserted into the data source. |
| cardInserting | Raised before a new card is inserted into the data source. |
| cardPrepared | Raised after a card is created. |
| cardRemoved | Raised after a card was removed from the data source. |
| cardRemoving | Raised before a card is removed from the data source. |
| cardSaved | Raised after card changes are saved. |
| cardSaving | Raised before pending card changes are saved. |
| cardUpdated | Raised after a card was updated in the data source. |
| cardUpdating | Raised before a card is updated in the data source. |
| contentReady | Raised when the UI component is rendered and each time the component is repainted. |
| contextMenuPreparing | Raised before the context menu is rendered. |
| dataErrorOccurred | Raised when an error occurs in the data source. |
| disposing | Raised before the UI component is disposed of. |
| editCanceled | Raised after card changes are discarded. |
| editCanceling | Raised when the edit operation is canceled, but card changes are not yet discarded. |
| editingStart | Raised before a card switches to the editing state. |
| fieldCaptionClick | Raised when a field caption is clicked or tapped. |
| fieldCaptionDblClick | Raised when a field caption is double-clicked or double-tapped. |
| fieldCaptionPrepared | Raised after a field caption is created. |
| fieldValueClick | Raised when a field value is clicked or tapped. |
| fieldValueDblClick | Raised when a field value is double-clicked or double-tapped. |
| fieldValuePrepared | Raised after a field value is created. |
| focusedCardChanged | Raised before after the focused card changes. |
| initialized | Raised only once, after the UI component is initialized. |
| initNewCard | Raised before a new card is added to the component. |
| optionChanged | Raised after a UI component property is changed. |
| selectionChanged | Raised when a card is selected or its selection is cleared. |
See Also
Types
| Name | Description |
|---|---|
| CardClickEvent | The argument type in the cardClick event. |
| CardCover | Configures the card cover. |
| CardDblClickEvent | The argument type in the cardDblClick event. |
| CardHeader | Configures the card header. |
| CardHeaderItem | Configures card header items. |
| CardHeaderPredefinedItem | Specifies predefined items for the CardView card headers. |
| CardHoverChangedEvent | The argument type in the cardHoverChanged event. |
| CardInfo | The information about the card. |
| CardInsertedEvent | The argument type in the cardInserted event. |
| CardInsertingEvent | The argument type in the cardInserting event. |
| CardPreparedEvent | The argument type in the cardPrepared event. |
| CardRemovedEvent | The argument type in the cardRemoved event. |
| CardRemovingEvent | The argument type in the cardRemoving event. |
| CardSavedEvent | The argument type in the cardSaved event. |
| CardSavingEvent | The argument type in the cardSaving event. |
| CardTemplateData | Specifies card template data. |
| CardUpdatedEvent | The argument type in the cardUpdated event. |
| CardUpdatingEvent | The argument type in the cardUpdating event. |
| Column | Configures the column. |
| ColumnProperties | Configures column properties. |
| ColumnTemplateData | The data of column template. |
| ContextMenuPreparingEvent | The argument type in the contextMenuPreparing event. |
| ContextMenuTarget | Specifies the element that should be clicked to invoke the context menu. |
| dxCardViewEditing | Configures editing. |
| dxCardViewFieldInfo | Information about the field. |
| EditCanceledEvent | The argument type in the editCanceled event. |
| EditCancelingEvent | The argument type in the editCanceling event. |
| EditingStartEvent | The argument type in the editingStart event. |
| EditingTexts | The texts displayed when editing a card. |
| FieldCaptionClickEvent | The argument type in the fieldCaptionClick event. |
| FieldCaptionDblClickEvent | The argument type in the fieldCaptionDblClick event. |
| FieldCaptionPreparedEvent | The argument type in the fieldCaptionPrepared event. |
| FieldTemplateData | Specifies a custom template for the field. |
| FieldValueClickEvent | The argument type in the fieldValueClick event. |
| FieldValueDblClickEvent | The argument type in the fieldValueDblClick event. |
| FieldValuePreparedEvent | The argument type in the fieldValuePrepared event. |
| FocusedCardChanged | The argument type in the focusedCardChanged event. |
| HeaderPanel | Configures the header panel. |
| InitNewCardEvent | The argument type in the initNewCard event. |
| Paging | Configures paging. |
| PredefinedToolbarItem | Specifies predefined items for the CardView toolbar. |
| RemoteOperations | Notifies CardView of the server's data processing operations. |
| SelectionChangedEvent | The argument type in the selectionChanged event. |
| SelectionConfiguration | Configures runtime selection. |
| Toolbar | Configures the toolbar. |
| ToolbarItem | Configures toolbar items. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.