CardView - demos - descriptions (DevExpress#30003)

pomahtri · vladaskorohodova · dirkpieterse · web-flow · commit 1bf1a87d2b99 · 2025-06-02T11:45:27.000+04:00
Signed-off-by: Vlada Skorokhodova &lt;94827090+vladaskorohodova@users.noreply.github.com&gt;
Co-authored-by: Vlada Skorokhodova &lt;vlada.skorokhodova@devexpress.com&gt;
Co-authored-by: Vlada Skorokhodova &lt;94827090+vladaskorohodova@users.noreply.github.com&gt;
Co-authored-by: dirkpieterse &lt;dirk.pieterse@devexpress.com&gt;
diff --git a/apps/demos/Demos/CardView/CardTemplate/description.md b/apps/demos/Demos/CardView/CardTemplate/description.md
@@ -0,0 +1,2 @@
+Card templates allow you to display custom content in cards. In this demo, a [cardTemplate](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#cardTemplate) adds car images and additional content (such as badges) to regular cards.
+<!--split-->
diff --git a/apps/demos/Demos/CardView/ColumnChooser/description.md b/apps/demos/Demos/CardView/ColumnChooser/description.md
@@ -0,0 +1,16 @@
+To change field visibility at runtime, set the **columnChooser**.[enabled](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columnChooser/#enabled) property to `true`. To ensure specific fields remain visible, set the **columns[]**.[allowHiding](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#allowHiding) property to `false`.
+<!--split-->
+
+To display the column chooser, click the toolbar button above the CardView. You can specify the column chooser's position with the **columnChooser**.[position](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columnChooser/#position) property. Changing how users display or hide columns depends on **columnChooser**.[mode](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columnChooser/#mode):
+
+* *"dragAndDrop"*    
+Users drag and drop fields between the header panel and column chooser.
+
+* *"select"*   
+Users toggle check boxes for field names.
+
+If the column chooser contains multiple hidden columns, assign `true` to the **search**.[enabled](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columnChooser/search/#enabled) property to enable the DevExtreme field search UI.
+
+In this demo, use the checkboxes above the CardView to toggle search and selection features.
+
+To hide a field programmatically, change  **columns[]**.[visible](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#visible) property to `false`.
diff --git a/apps/demos/Demos/CardView/ColumnHeaderFilter/description.md b/apps/demos/Demos/CardView/ColumnHeaderFilter/description.md
@@ -0,0 +1,14 @@
+DevExtreme CardView includes a header filter which allows users to filter cards by field values. Click the header filter icon in the CardView's header panel to open the pop-up menu.
+<!--split-->
+
+### Display Header Filter Icons
+
+Assign `true` to the **headerFilter**.[visible](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/headerFilter/#visible) property to display header filter icons for all CardView fields. To hide the icon for a specific field, set the [allowHeaderFiltering](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#allowHeaderFiltering) property to `false`.
+
+### Enable Search UI Within Header Filters
+
+CardView offers a text-based search to find specific values in a header filter. Define the [search](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/headerFilter/search/) property in the **headerFilter** object or a **columns**.[headerFilter](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/headerFilter/) object to configure this capability.
+
+The search panel checks for values only within the same data field. To expand the search to additional fields, use **search**.[searchExpr](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/headerFilter/search/#searchExpr) property. For example, this demo allows you to enter a state name in the City column's header filter. You can then see a list of all cities within the specified state and select city names that you want to use as a filter.
+
+To apply a comparison operation used to search header filter values, specify the **search**.[mode](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/headerFilter/search/#mode) property.
diff --git a/apps/demos/Demos/CardView/ColumnsReordering/description.md b/apps/demos/Demos/CardView/ColumnsReordering/description.md
@@ -0,0 +1,4 @@
+DevExtreme CardView fields use the same display order as data fields in the component's [dataSource](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#dataSource). You can specify a different display order with the [columns[]](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/) array. To reorder a field at runtime, change the **columns[]**.[visibleIndex](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#visibleIndex) property.
+<!--split-->
+
+To allow users to reorder fields, set [allowColumnReordering](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#allowColumnReordering) to `true`. To disable reordering operations for a specific field, assign `false` to its [allowReordering](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#allowReordering) property.
diff --git a/apps/demos/Demos/CardView/DataValidation/description.md b/apps/demos/Demos/CardView/DataValidation/description.md
@@ -0,0 +1,13 @@
+CardView allows you to validate user input. You can apply pre-defined [validation rules](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#validationRules) or custom rules to individual columns. 
+<!--split-->
+
+In this demo, the following rules are used:
+
+- [required](/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/RequiredRule/)     
+Specifies that field values should not be empty.   
+- [pattern](/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/PatternRule/)       
+Specifies a pattern that field values should match.   
+- [email](/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/EmailRule/)   
+Specifies that field values match the Email pattern.   
+- [async](/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/AsyncRule/)   
+Specifies custom validation parameters that are used to validate a value on the server.
diff --git a/apps/demos/Demos/CardView/FieldTemplate/description.md b/apps/demos/Demos/CardView/FieldTemplate/description.md
@@ -0,0 +1,4 @@
+Field templates allow you to display custom content in field elements. Use the [fieldTemplate](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#fieldTemplate) property to configure these templates.
+
+In this demo, custom field templates are configured to customize the appearance of the 'Priority', 'Assigned to', and 'Completed' fields.
+<!--split-->
diff --git a/apps/demos/Demos/CardView/FilterPanel/description.md b/apps/demos/Demos/CardView/FilterPanel/description.md
@@ -0,0 +1,6 @@
+The [filter panel](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/filterPanel/) is a UI element that displays the combined filter. This filter is stored in the [filterValue](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#filterValue) property and includes filters that users apply in other UI elements ([header filter](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/headerFilter/), [filterBuilder](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#filterBuilder)).
+
+To display the filter panel, set the **filterPanel**.[visible](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/filterPanel/#visible) property to `true`. 
+
+A click on the combined filter calls the integrated filter builder. You can configure it in the [filterBuilder](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#filterBuilder) object. In this demo, this object is used to add the `weekends` [custom filter operation](/Documentation/ApiReference/UI_Components/dxFilterBuilder/Configuration/customOperations).
+<!--split-->
diff --git a/apps/demos/Demos/CardView/Overview/description.md b/apps/demos/Demos/CardView/Overview/description.md
diff --git a/apps/demos/Demos/CardView/PopupEditing/description.md b/apps/demos/Demos/CardView/PopupEditing/description.md
@@ -0,0 +1,9 @@
+CardView can display a popup edit form. The form can include any fields from the bound data source, regardless of whether the corresponding column is visible in the grid (see the `Notes` and `Address` columns).
+
+To enable this behavior in your application, set the following properties to `true`:
+- [editing](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/editing/).[allowUpdating](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/editing/#allowUpdating)
+- **editing**.[allowAdding](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/editing/#allowAdding)
+- **editing**.[allowDeleting](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/editing/#allowDeleting)
+<!--split-->
+
+CardView uses the DevExtreme [Form](/Documentation/ApiReference/UI_Components/dxForm/) and [Popup](/Documentation/ApiReference/UI_Components/dxPopup/) components to display the form and the popup. Their default configurations are defined automatically. If these configurations do not meet your requirements, you can redefine them in the **editing** object's [form](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/editing/#form) and [popup](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/editing/#popup) properties as shown in this demo.
diff --git a/apps/demos/Demos/CardView/SearchPanel/description.md b/apps/demos/Demos/CardView/SearchPanel/description.md
@@ -0,0 +1,8 @@
+To enable user data search, activate the [searchPanel](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/searchPanel/) by setting its [visible](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/searchPanel/#visible) property to `true`.
+
+CardView searches through all fields, whether they are [visible](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#visible) or hidden. To search only visible fields, enable the **searchPanel**.[searchVisibleColumnsOnly](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/searchPanel/#searchVisibleColumnsOnly) property. To omit specific fields, set their [allowSearch](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#allowSearch) property to `false`.
+<!--split-->
+
+Numeric, date, and Boolean values match only if they are equal to the search query. String values match if they contain the query. Search for strings is case-insensitive.
+
+To specify a search query in code, set the **searchPanel**.[text](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/searchPanel/#text) property or call the [searchByText(text)](/Documentation/ApiReference/UI_Components/dxCardView/Methods/#searchByTexttext) method.
diff --git a/apps/demos/Demos/CardView/Selection/description.md b/apps/demos/Demos/CardView/Selection/description.md
@@ -0,0 +1,2 @@
+CardView supports single and multiple selection modes. Set the selection [mode](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/selection/#mode) option to either *"single"* or *"multiple"* to enable this capability.
+<!--split-->
diff --git a/apps/demos/Demos/CardView/SimpleArray/description.md b/apps/demos/Demos/CardView/SimpleArray/description.md
@@ -0,0 +1,4 @@
+You can use the CardView component to display data from an array of objects. Use the [dataSource](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#dataSource) and [keyExpr](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#keyExpr) properties to specify the bound array and its key field.
+
+Use the [columns](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/) property to specify a list of data fields you want to display within the CardView as fields. If the **columns** property is not specified, the component creates columns for all data fields available in objects from the bound array.
+<!--split-->
diff --git a/apps/demos/Demos/CardView/Sorting/description.md b/apps/demos/Demos/CardView/Sorting/description.md
@@ -0,0 +1,12 @@
+The CardView component can sort values by a single or multiple fields. Use the **sorting**.[mode](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/sorting/#mode) property to specify the sort mode.
+<!--split-->
+
+- **Single sort mode**       
+A user can click the header panel item to sort by this field and click it again to change the sort order (ascending or descending). An arrow icon in the header panel item indicates the sort order.
+
+- **Multiple sort mode**         
+A user can hold the **Shift** key and click header panel items in the order the user wants to apply sorting. A number in the header panel item indicates the sort index. To cancel a field's sort settings, a user should hold the **Ctrl** key and click the header panel item.
+
+A user can also apply or cancel sort settings in the header panel item's context menu. To disallow a user to sort by a particular field, set the field's [allowSorting](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#allowSorting) property to `false`.
+
+To specify the initial sort settings, use the field's [sortOrder](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#sortOrder) and [sortIndex](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#sortIndex) properties. You can also use these properties to change sort settings at runtime.
diff --git a/apps/demos/Demos/CardView/WebAPIService/description.md b/apps/demos/Demos/CardView/WebAPIService/description.md
@@ -0,0 +1,4 @@
+To access a Web API service from the client, use the <a href="https://github.com/DevExpress/DevExtreme.AspNet.Data/blob/master/docs/client-side-with-jquery.md#api-reference" target="_blank">createStore</a> method which is part of the <a href="https://github.com/DevExpress/DevExtreme.AspNet.Data#devextreme-aspnet-data" target="_blank">DevExtreme.AspNet.Data</a> extension. This extension also allows you to process data for DevExtreme components <a href="https://github.com/DevExpress/DevExtreme.AspNet.Data/blob/master/docs/server-side-configuration.md" target="_blank">on the server</a>. 
+ 
+To notify CardView that data is processed on the server, set the [remoteOperations](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/remoteOperations/) property to `true`.
+<!--split-->

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+Card templates allow you to display custom content in cards. In this demo, a [cardTemplate](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#cardTemplate) adds car images and additional content (such as badges) to regular cards.`
	`2`	`+<!--split-->`