CardView - demos - design fixes (DevExpress#30077)

Author: pomahtri

apps/demos/Demos/CardView/ColumnReordering/Angular/app/app.component.html

@@ -3,9 +3,9 @@
   [dataSource]="orders"
   keyExpr="ID"
   [allowColumnReordering]="true"
-  [cardMinWidth]="100"
-  [wordWrapEnabled]="true"
+  [cardsPerRow]="2"
 >
+  <dxo-card-view-paging [pageSize]="4"></dxo-card-view-paging>
   <dxi-card-view-column
     dataField="OrderNumber"
     [allowReordering]="false"

apps/demos/Demos/CardView/ColumnReordering/React/App.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
-import CardView, { Column } from 'devextreme-react/card-view';
+import CardView, { Column, Paging } from 'devextreme-react/card-view';
 import { orders } from './data.ts';
 
 const App = () => (
   <CardView
     id="cardView"
     dataSource={orders}
-    cardMinWidth={100}
-    wordWrapEnabled={true}
+    cardsPerRow={2}
     keyExpr="ID"
     allowColumnReordering={true}
   >
+    <Paging
+      pageSize={4}
+    />
     <Column
       dataField="OrderNumber"
       allowReordering={false}

apps/demos/Demos/CardView/ColumnReordering/ReactJs/App.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import CardView, { Column } from 'devextreme-react/card-view';
+import CardView, { Column, Paging } from 'devextreme-react/card-view';
 import { orders } from './data.js';
 
 const App = () => (
   <CardView
     id="cardView"
     dataSource={orders}
-    cardMinWidth={100}
-    wordWrapEnabled={true}
+    cardsPerRow={2}
     keyExpr="ID"
     allowColumnReordering={true}
   >
+    <Paging pageSize={4} />
     <Column
       dataField="OrderNumber"
       allowReordering={false}

apps/demos/Demos/CardView/ColumnReordering/Vue/App.vue

@@ -3,10 +3,12 @@
     id="cardView"
     :data-source="orders"
     key-expr="ID"
-    :card-min-width="100"
-    :word-wrap-enabled="true"
+    :cards-per-row="2"
     :allow-column-reordering="true"
   >
+    <DxPaging
+      :page-size="4"
+    />
     <DxColumn
       data-field="OrderNumber"
       :allow-reordering="false"
@@ -25,6 +27,6 @@
   </DxCardView>
 </template>
 <script setup lang="ts">
-import { DxCardView, DxColumn } from 'devextreme-vue/card-view';
+import { DxCardView, DxColumn, DxPaging } from 'devextreme-vue/card-view';
 import { orders } from './data.ts';
 </script>

apps/demos/Demos/CardView/ColumnReordering/jQuery/index.js

@@ -3,8 +3,10 @@ $(() => {
     dataSource: orders,
     keyExpr: 'ID',
     allowColumnReordering: true,
-    cardMinWidth: 100,
-    wordWrapEnabled: true,
+    cardsPerRow: 2,
+    paging: {
+      pageSize: 4
+    },
     columns: [
       {
         dataField: 'OrderNumber',

apps/demos/Demos/CardView/DataValidation/Angular/app/app.component.html

@@ -2,9 +2,9 @@
   [dataSource]="employees"
   keyExpr="id"
   [searchPanel]="searchPanelConfig"
-  [cardMinWidth]="100"
-  [wordWrapEnabled]="true"
+  [cardsPerRow]="2"
 >
+  <dxo-card-view-paging [pageSize]="4"></dxo-card-view-paging>
   <dxo-card-view-card-cover
     [imageExpr]="imageExpr"
     [altExpr]="altExpr"

apps/demos/Demos/CardView/DataValidation/React/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import CardView, { Column, CardCover, Editing, RequiredRule, PatternRule, EmailRule, AsyncRule, CustomRule } from 'devextreme-react/card-view';
+import CardView, { Column, CardCover, Editing, Paging, RequiredRule, PatternRule, EmailRule, AsyncRule, CustomRule } from 'devextreme-react/card-view';
 import { employees, Employee } from './data.ts';
 
 function altExpr({ fullName }: Employee) {
@@ -41,13 +41,15 @@ const App = () => (
   <CardView
     dataSource={employees}
     keyExpr="id"
-    cardMinWidth={100}
-    wordWrapEnabled={true}
+    cardsPerRow={2}
     // todo: move to nested components
     searchPanel={{
       visible: true,
     }}
   >
+    <Paging
+      pageSize={4}
+    />
     <CardCover
       imageExpr={imageExpr}
       altExpr={altExpr}
@@ -98,7 +100,7 @@ const App = () => (
             ],
           },
         ],
-      }}
+      } as any}
     />
     <Column
       caption="Full Name"

apps/demos/Demos/CardView/DataValidation/ReactJs/App.js

@@ -3,6 +3,7 @@ import CardView, {
   Column,
   CardCover,
   Editing,
+  Paging,
   RequiredRule,
   PatternRule,
   EmailRule,
@@ -42,13 +43,13 @@ const App = () => (
   <CardView
     dataSource={employees}
     keyExpr="id"
-    cardMinWidth={100}
-    wordWrapEnabled={true}
+    cardsPerRow={2}
     // todo: move to nested components
     searchPanel={{
       visible: true,
     }}
   >
+    <Paging pageSize={4} />
     <CardCover
       imageExpr={imageExpr}
       altExpr={altExpr}

apps/demos/Demos/CardView/DataValidation/Vue/App.vue

@@ -2,12 +2,14 @@
   <DxCardView
     :data-source="employees"
     key-expr="id"
-    :card-min-width="100"
-    :word-wrap-enabled="true"
+    :cards-per-row="2"
     :search-panel="{ // todo: move to nested
       visible: true,
     }"
   >
+    <DxPaging
+      :page-size="4"
+    />
     <DxCardCover
       :image-expr="imageExpr"
       :alt-expr="altExpr"
@@ -132,7 +134,7 @@
 </template>
 <script setup lang="ts">
 import {
-  DxCardView, DxColumn, DxCardCover, DxEditing, DxRequiredRule, DxEmailRule, DxPatternRule, DxAsyncRule, DxCustomRule,
+  DxCardView, DxColumn, DxCardCover, DxEditing, DxPaging, DxRequiredRule, DxEmailRule, DxPatternRule, DxAsyncRule, DxCustomRule,
 } from 'devextreme-vue/card-view';
 import { employees, type Employee } from './data.ts';
 

apps/demos/Demos/CardView/DataValidation/jQuery/index.js

@@ -2,8 +2,10 @@ $(() => {
   $('#card-view').dxCardView({
     dataSource: employees,
     keyExpr: 'id',
-    cardMinWidth: 100,
-    wordWrapEnabled: true,
+    cardsPerRow: 2,
+    paging: {
+      pageSize: 4
+    },
     cardCover: {
       imageExpr: ({ picture }) => picture,
       altExpr: ({ fullName }) => `Photo of ${fullName}`,