CardView: Update demo descriptions (DevExpress#30108)

arman-boyakhchyan · web-flow · commit 5f56706a3a9c · 2025-06-12T13:57:57.000+04:00
diff --git a/apps/demos/Demos/CardView/CardTemplate/description.md b/apps/demos/Demos/CardView/CardTemplate/description.md
@@ -1,2 +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.
+Card templates allow you to display custom content in cards. This demo uses a [cardTemplate](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#cardTemplate) to display car images, car info, and a custom button in cards.
 <!--split-->
diff --git a/apps/demos/Demos/CardView/ColumnChooser/description.md b/apps/demos/Demos/CardView/ColumnChooser/description.md
@@ -1,13 +1,15 @@
-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 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`. In this demo, **allowHiding** is disabled for the "Full Name" and "Phone" columns.
 
-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):
+Set **columnChooser**.[mode](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columnChooser/#mode) to specify how users toggle column visibility:
 
 * *"dragAndDrop"*    
 Users drag and drop fields between the header panel and column chooser.
 
-* *"select"*   
+* *"select"*    
 Users toggle check boxes for field names.
+<!--split-->
+
+To display the column chooser, click the column chooser icon in the CardView toolbar. You can specify the column chooser's position with the **columnChooser**.[position](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columnChooser/#position) property.
 
 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.
 
diff --git a/apps/demos/Demos/CardView/ColumnHeaderFilter/description.md b/apps/demos/Demos/CardView/ColumnHeaderFilter/description.md
@@ -1,9 +1,9 @@
-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.
+DevExtreme CardView includes a header filter that allows users to filter cards by field values. Click the filter icon in a field's header panel to open the pop-up CardView filter.
 <!--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`.
+Assign `true` to the **headerFilter**.[visible](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/headerFilter/#visible) property to allow users to filter CardView fields with header icons. To hide the icon for a specific column, set **columns**.[allowHeaderFiltering](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#allowHeaderFiltering) to `false`.
 
 ### Enable Search UI Within Header Filters
 
diff --git a/apps/demos/Demos/CardView/ColumnReordering/description.md b/apps/demos/Demos/CardView/ColumnReordering/description.md
@@ -1,4 +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.
+Users can drag and drop header items to reorder columns when [allowColumnReordering](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#allowColumnReordering) is set to `true`. To disable reordering operations for a specific field, assign `false` to its [allowReordering](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/columns/#allowReordering) property. In this demo, **allowReordering** is disabled for the `OrderNumber` field.
diff --git a/apps/demos/Demos/CardView/DataValidation/description.md b/apps/demos/Demos/CardView/DataValidation/description.md
@@ -3,11 +3,13 @@ CardView allows you to validate user input. You can apply pre-defined [validatio
 
 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.   
+- [required](/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/RequiredRule/)    
+Specifies that field values should not be empty. The `birthDate`, `hireDate`, `title`, `firstName`, and `lastName` fields use required rule.    
+- [pattern](/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/PatternRule/)    
+Specifies a pattern that field values should match. The `mobilePhone` field uses pattern rule.    
+- [email](/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/EmailRule/)    
+Specifies that field values match the Email pattern. The `email` field uses email rule.    
 - [async](/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/AsyncRule/)   
-Specifies custom validation parameters that are used to validate a value on the server.
+Specifies custom validation parameters that are used to validate a value on the server. The `email` field uses async rule.    
+- [custom](/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/CustomRule/)    
+Specifies custom validation rules. This demo implements a custom rule to prevent users from setting `hireDate` earlier than `birthDate`.
diff --git a/apps/demos/Demos/CardView/FilterPanel/description.md b/apps/demos/Demos/CardView/FilterPanel/description.md
@@ -1,6 +1,8 @@
 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)).
+<!--split-->
 
 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-->
+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 `beforeNoon` and `afterNoon` [custom filter operations](/Documentation/ApiReference/UI_Components/dxFilterBuilder/Configuration/customOperations).
+
+The integrated filter builder displays in a DevExtreme [Popup](/Documentation/ApiReference/UI_Components/dxPopup/) component. You can configure the filter builder popup with the [filterBuilderPopup](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#filterBuilderPopup) object.
diff --git a/apps/demos/Demos/CardView/Overview/description.md b/apps/demos/Demos/CardView/Overview/description.md
@@ -1,4 +1,8 @@
 The DevExtreme CardView component allows you to display business data using a 'card' UI metaphor — a visually engaging alternative to traditional grid views. Use it for employee directories, contact lists, product catalogs, or task boards.
+
+To get started with the CardView component, refer to the following tutorial for step-by-step instructions: [Getting Started with CardView](/Documentation/Guide/UI_Components/CardView/Getting_Started_with_CardView/).
+
+For a complete overview of CardView options, refer to the [CardView API Reference](/Documentation/ApiReference/UI_Components/dxCardView/).
 <!--split-->
 
 CardView ships with the following built-in data management capabilities:  
@@ -13,5 +17,3 @@ CardView ships with the following built-in data management capabilities:
 - Data selection
 
 Each card within the CardView is customizable, with UI elements such as toolbars, covers, and footers that allow you to adapt layouts. 
-
-For a complete overview of CardView options, refer to the [CardView API Reference](/Documentation/ApiReference/UI_Components/dxCardView/).
diff --git a/apps/demos/Demos/CardView/PopupEditing/description.md b/apps/demos/Demos/CardView/PopupEditing/description.md
@@ -1,9 +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).
+CardView allows users to edit data in a pop-up edit form. To start editing a card, click the Edit button in its header. Only one card can be edited at a time. The pop-up edit form can include any field from the component data source, regardless of whether the corresponding column is visible in the grid (see the `Notes` field).
+<!--split-->
 
-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)
+To enable card editing in your application, set the following [editing](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/editing/) properties to `true`:
+- **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/Selection/description.md b/apps/demos/Demos/CardView/Selection/description.md
@@ -1,2 +1,11 @@
-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-->
+CardView supports single and multiple selection modes. Set [selection](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/selection/).[mode](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/selection/#mode) to either *"single"* or *"multiple"* to enable this capability.
+<!--split-->
+
+Use the following properties to configure CardView selection:
+
+- [allowSelectAll](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/selection/#allowSelectAll)    
+Allows users to simultaneously select all or current page cards (depending on **selectAllMode**).    
+- [selectAllMode](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/selection/#selectAllMode)    
+Specifies the mode for selecting all cards. Applies only if **selection**.**allowSelectAll** is `true`.    
+- [showCheckBoxesMode](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/selection/#showCheckBoxesMode)    
+Specifies when to display card selection checkboxes.
diff --git a/apps/demos/Demos/CardView/SimpleArray/description.md b/apps/demos/Demos/CardView/SimpleArray/description.md
@@ -1,4 +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.
+You can use the CardView component to display and edit 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
@@ -5,7 +5,9 @@ The CardView component can sort values by a single or multiple fields. Use the *
 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 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 (**Cmd** on macOS) 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`.
 
diff --git a/apps/demos/Demos/DataGrid/Overview/jQuery/description.md b/apps/demos/Demos/DataGrid/Overview/jQuery/description.md
@@ -1,4 +1,4 @@
-DevExtreme JavaScript DataGrid is a client-side grid control available as a jQuery component. This control supports binding to data from local arrays, JSON files, Web API and OData services, as well as custom remote services. Check out other demos in this section to explore more DataGrid features, like data editing and validation, paging, scrolling, etc.
+DevExtreme DataGrid is a client-side grid control available as a jQuery component. This control supports binding to data from local arrays, JSON files, Web API, OData services, and custom remote services. Check out other demos in this section to explore more DataGrid features, like data editing and validation, paging, scrolling, and so on.
 
 To get started with the DevExtreme DataGrid component, refer to the following tutorial for step-by-step instructions: [Getting Started with DataGrid](/Documentation/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid/).
 

Original file line number	Diff line number	Diff line change
`@@ -1,2 +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.`
	`1`	`+Card templates allow you to display custom content in cards. This demo uses a [cardTemplate](/Documentation/ApiReference/UI_Components/dxCardView/Configuration/#cardTemplate) to display car images, car info, and a custom button in cards.`
`2`	`2`	`<!--split-->`