CardView - demos - Columns Reordering (#29964)

Author: pomahtri

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

@@ -1,6 +1,22 @@
-<dx-card-view id="cardView" [dataSource]="customers" keyExpr="ID">
+<dx-card-view
+  id="cardView"
+  [dataSource]="orders"
+  keyExpr="ID"
+  [allowColumnReordering]="true"
+>
   <dxi-card-view-column
-    *ngFor="let column of columns"
-    [dataField]="column"
+    dataField="OrderNumber"
+    [allowReordering]="false"
+  ></dxi-card-view-column>
+  <dxi-card-view-column dataField="SaleAmount"></dxi-card-view-column>
+  <dxi-card-view-column dataField="Customer"></dxi-card-view-column>
+  <dxi-card-view-column dataField="Location"></dxi-card-view-column>
+  <dxi-card-view-column
+    dataField="OrderDate"
+    dataType="date"
+  ></dxi-card-view-column>
+  <dxi-card-view-column
+    dataField="DeliveryDate"
+    dataType="date"
   ></dxi-card-view-column>
 </dx-card-view>

apps/demos/Demos/CardView/ColumnsReordering/Angular/app/app.component.ts

@@ -2,7 +2,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxCardViewModule } from 'devextreme-angular';
-import { Customer, Service } from './app.service';
+import { Order, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -20,12 +20,10 @@ if (window && window.config?.packageConfigPaths) {
   providers: [Service],
 })
 export class AppComponent {
-  customers: Customer[];
-
-  columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+  orders: Order[];
 
   constructor(service: Service) {
-    this.customers = service.getCustomers();
+    this.orders = service.getOrder();
   }
 }