Angular Card View - Web API Service

To access a Web API service from the client, use the createStore method which is part of the DevExtreme.AspNet.Data extension. This extension also allows you to process data for DevExtreme components on the server.

To notify our CardView that data is processed on the server, set the remoteOperations property to true.

Backend API

<dx-card-view [dataSource]="dataSource" [remoteOperations]="true" cardsPerRow="auto" [cardMinWidth]="280" [wordWrapEnabled]="true" > <dxo-card-view-search-panel [visible]="true"></dxo-card-view-search-panel> <dxo-card-view-header-filter [visible]="true"></dxo-card-view-header-filter> <dxo-card-view-editing [allowAdding]="true" [allowUpdating]="true" [allowDeleting]="true" [popup]="{ width: 700, height: 400 }" > <dxo-card-view-form> <dxi-card-view-item dataField="Task_Subject"></dxi-card-view-item> <dxi-card-view-item dataField="Task_Start_Date"></dxi-card-view-item> <dxi-card-view-item dataField="Task_Due_Date"></dxi-card-view-item> <dxi-card-view-item dataField="Task_Priority" editorType="dxSelectBox" [editorOptions]="{ dataSource: ['Low', 'Normal', 'High', 'Urgent'] }" ></dxi-card-view-item> <dxi-card-view-item dataField="Task_Status"></dxi-card-view-item> </dxo-card-view-form> </dxo-card-view-editing> <dxi-card-view-column dataField="Task_Subject" caption="Subject"> <dxi-card-view-validation-rule type="required" ></dxi-card-view-validation-rule> </dxi-card-view-column> <dxi-card-view-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>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import * as AspNetData from 'devextreme-aspnet-data-nojquery'; import { DxCardViewModule } from 'devextreme-angular'; import 'devextreme/ui/select_box'; import 'anti-forgery'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } const url = 'https://js.devexpress.com/Demos/NetCore/api/TreeListTasks'; @Component({ styleUrls: [`app/app.component.css`], selector: 'demo-app', templateUrl: './app.component.html', imports: [ DxCardViewModule, ], }) export class AppComponent { 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 }; }, }); } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>