Your search did not match any results.
List

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. The server-side implementation is available under the ListDataController.cs tab in the ASP.NET MVC version of this demo.

Backend API
Copy to CodeSandBox
Apply
Reset
import React from 'react'; import List from 'devextreme-react/list'; import DataSource from 'devextreme/data/data_source'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import ProductInfo from './ProductInfo.js'; const dataSource = new DataSource({ store: createStore({ key: 'ProductID', loadUrl: 'https://js.devexpress.com/Demos/Mvc/api/ListData/Orders', }), sort: 'ProductName', group: 'Category.CategoryName', paginate: true, pageSize: 1, filter: ['UnitPrice', '>', 15], }); class App extends React.Component { render() { return ( <div className="list-container"> <List dataSource={dataSource} height={600} grouped={true} collapsibleGroups={true} selectionMode="multiple" showSelectionControls={true} pageLoadMode="scrollBottom" itemRender={ProductInfo} /> </div> ); } } export default App;
import React from 'react'; const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2, }); export default function ProductInfo(item) { return ( <React.Fragment> <div>{item.CategoryName}</div> <div>{item.ProductName}</div> <b className="price">{currencyFormatter.format(item.UnitPrice)}</b> </React.Fragment> ); }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app'), );
<!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.js"); </script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
window.config = { transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { 'esModule': true, }, 'devextreme-aspnet-data-nojquery': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@2.8.4/index.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.2.3/cjs', 'devextreme-react': 'npm:devextreme-react@21.2.3', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.5/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.37/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@3.1.24/dist/dx-gantt.js', '@devextreme/vdom': 'npm:@devextreme/vdom@2.2.3', '@devextreme/runtime': 'npm:@devextreme/runtime@2.3.8', 'inferno': 'npm:inferno@7.4.10/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.10/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.10/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.10/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.10/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.10/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.10/dist/inferno-extras.min.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, '@devextreme/vdom': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@2.3.8/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using System.Web.Http; using DevExtreme.MVC.Demos.Models.Northwind; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class ListDataController : ApiController { NorthwindContext _nwind = new NorthwindContext(); [HttpGet] public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) { return Request.CreateResponse( DataSourceLoader.Load(_nwind.Products.Include("Category"), loadOptions) ); } } }