React 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.

TS JS

Backend API

import React from 'react'; import * as AspNetData from 'devextreme-aspnet-data-nojquery'; import CardView, { Column, Editing, RequiredRule, SearchPanel, HeaderFilter, Form, Item } from 'devextreme-react/card-view'; import 'devextreme/ui/select_box'; 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 popupConfig = { width: 700, height: 400 }; const priorityOptions = { dataSource: ['Low', 'Normal', 'High', 'Urgent'] }; const App = () => ( <CardView dataSource={dataSource} remoteOperations={true} cardsPerRow="auto" cardMinWidth={280} wordWrapEnabled={true} > <SearchPanel visible={true} /> <HeaderFilter visible={true} /> <Editing allowAdding={true} allowUpdating={true} allowDeleting={true} popup={popupConfig} > <Form> <Item dataField="Task_Subject" ></Item> <Item dataField="Task_Start_Date" ></Item> <Item dataField="Task_Due_Date" ></Item> <Item dataField="Task_Priority" editorType="dxSelectBox" editorOptions={priorityOptions} ></Item> <Item dataField="Task_Status" ></Item> </Form> </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> ); export default App;

import React from 'react'; import * as AspNetData from 'devextreme-aspnet-data-nojquery'; import CardView, { Column, Editing, RequiredRule, SearchPanel, HeaderFilter, Form, Item, } from 'devextreme-react/card-view'; import 'devextreme/ui/select_box'; 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 popupConfig = { width: 700, height: 400 }; const priorityOptions = { dataSource: ['Low', 'Normal', 'High', 'Urgent'] }; const App = () => ( <CardView dataSource={dataSource} remoteOperations={true} cardsPerRow="auto" cardMinWidth={280} wordWrapEnabled={true} > <SearchPanel visible={true} /> <HeaderFilter visible={true} /> <Editing allowAdding={true} allowUpdating={true} allowDeleting={true} popup={popupConfig} > <Form> <Item dataField="Task_Subject"></Item> <Item dataField="Task_Start_Date"></Item> <Item dataField="Task_Due_Date"></Item> <Item dataField="Task_Priority" editorType="dxSelectBox" editorOptions={priorityOptions} ></Item> <Item dataField="Task_Status"></Item> </Form> </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> ); export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; // eslint-disable-next-line import/no-unresolved import 'anti-forgery'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; import 'anti-forgery'; ReactDOM.render(<App />, document.getElementById('app'));

<!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" /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>