CardView - demos - WebAPI (DevExpress#29936)

Author: pomahtri

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

@@ -1,6 +1,34 @@
-<dx-card-view id="cardView" [dataSource]="customers" keyExpr="ID">
+<dx-card-view
+  [dataSource]="dataSource"
+  [remoteOperations]="true"
+  [wordWrapEnabled]="true"
+  [headerFilter]="headerFilterConfig"
+  [searchPanel]="searchPanelConfig"
+>
+  <dxo-card-view-editing
+    [allowAdding]="true"
+    [allowUpdating]="true"
+    [allowDeleting]="true"
+  ></dxo-card-view-editing>
+  <dxi-card-view-column dataField="Task_Subject" caption="Subject">
+    <dxi-card-view-required-rule></dxi-card-view-required-rule>
+  </dxi-card-view-column>
   <dxi-card-view-column
-    *ngFor="let column of columns"
-    [dataField]="column"
+    dataField="Task_Start_Date"
+    caption="Start Date"
+    dataType="date"
+  ></dxi-card-view-column>
+  <dxi-card-view-column
+    dataField="Task_Due_Date"
+    caption="Due Date"
+    dataType="date"
+  ></dxi-card-view-column>
+  <dxi-card-view-column
+    dataField="Task_Priority"
+    caption="Priority"
+  ></dxi-card-view-column>
+  <dxi-card-view-column
+    dataField="Task_Status"
+    caption="Status"
   ></dxi-card-view-column>
 </dx-card-view>

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

@@ -1,8 +1,8 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import * as AspNetData from 'devextreme-aspnet-data-nojquery';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxCardViewModule } from 'devextreme-angular';
-import { Customer, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -14,19 +14,33 @@ if (window && window.config?.packageConfigPaths) {
   modulePrefix = '/app';
 }
 
+const url = 'https://js.devexpress.com/Demos/NetCore/api/TreeListTasks';
+
 @Component({
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
-  providers: [Service],
 })
 export class AppComponent {
-  customers: Customer[];
+  dataSource = AspNetData.createStore({
+    key: 'Task_ID',
+    loadUrl: `${url}/Tasks`,
+    insertUrl: `${url}/InsertTask`,
+    updateUrl: `${url}/UpdateTask`,
+    deleteUrl: `${url}/DeleteTask`,
+    onBeforeSend(method, ajaxOptions) {
+      ajaxOptions.xhrFields = { withCredentials: true };
+    },
+  });
 
-  columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+  // TODO: Nested component does not exist
+  headerFilterConfig = {
+    visible: true,
+  };
 
-  constructor(service: Service) {
-    this.customers = service.getCustomers();
-  }
+  // TODO: Nested component does not exist
+  searchPanelConfig = {
+    visible: true,
+  };
 }
 
 @NgModule({

apps/demos/Demos/CardView/WebAPIService/Angular/app/app.service.ts

@@ -1,15 +1,67 @@
 import React from 'react';
-import CardView, { Column } from 'devextreme-react/card-view';
-import { customers } from './data.ts';
+import * as AspNetData from 'devextreme-aspnet-data-nojquery';
+import CardView, { Column, Editing, RequiredRule } from 'devextreme-react/card-view';
 
-const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+// TODO: Nested component does not exist
+const headerFilterConfig = {
+  visible: true,
+};
+
+// TODO: Nested component does not exist
+const searchPanelConfig = {
+  visible: true,
+};
+
+const url = 'https://js.devexpress.com/Demos/NetCore/api/TreeListTasks';
+
+const dataSource = AspNetData.createStore({
+  key: 'Task_ID',
+  loadUrl: `${url}/Tasks`,
+  insertUrl: `${url}/InsertTask`,
+  updateUrl: `${url}/UpdateTask`,
+  deleteUrl: `${url}/DeleteTask`,
+  onBeforeSend(method, ajaxOptions) {
+    ajaxOptions.xhrFields = { withCredentials: true };
+  },
+});
 
 const App = () => (
   <CardView
-    dataSource={customers}
-    keyExpr="ID"
+    dataSource={dataSource}
+    remoteOperations={true}
+    wordWrapEnabled={true}
+    headerFilter={headerFilterConfig}
+    searchPanel={searchPanelConfig}
   >
-    { columns.map((column, index) => <Column dataField={column} key={index} />) }
+    <Editing
+      allowAdding={true}
+      allowUpdating={true}
+      allowDeleting={true}
+    ></Editing>
+    <Column
+      dataField="Task_Subject"
+      caption="Subject"
+    >
+      <RequiredRule/>
+    </Column>
+    <Column
+      dataField="Task_Start_Date"
+      caption="Start Date"
+      dataType="date"
+    ></Column>
+    <Column
+      dataField="Task_Due_Date"
+      caption="Due Date"
+      dataType="date"
+    ></Column>
+    <Column
+      dataField="Task_Priority"
+      caption="Priority"
+    ></Column>
+    <Column
+      dataField="Task_Status"
+      caption="Status"
+    ></Column>
   </CardView>
 );