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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<div class="list-container">
<DxList
:data-source="dataSource"
:grouped="true"
:collapsible-groups="true"
:show-selection-controls="true"
height="600"
selection-mode="multiple"
page-load-mode="scrollBottom"
>
<template #item="{ data: item }">
<ProductInfo :item="item"/>
</template>
</DxList>
</div>
</template>
<script>
import ProductInfo from './ProductInfo.vue';
import DxList from 'devextreme-vue/list';
import DataSource from 'devextreme/data/data_source';
import { createStore } from 'devextreme-aspnet-data-nojquery';
const dataSource = new DataSource({
store: createStore({
loadUrl: 'https://js.devexpress.com/Demos/Mvc/api/ListData/Orders'
}),
sort: 'ProductName',
group: 'Category.CategoryName',
paginate: true,
pageSize: 1,
filter: ['UnitPrice', '>', 15]
});
export default {
components: {
DxList,
ProductInfo
},
data() {
return {
dataSource
};
}
};
</script>
<template>
<div>
<div>{{ item.CategoryName }}</div>
<div>{{ item.ProductName }}</div>
<b class="price">{{ currency(item.UnitPrice) }}</b>
</div>
</template>
<script>
const currencyFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
export default {
props: {
item: {
type: Object,
default: () => {}
}
},
methods: {
currency(data) {
return currencyFormatter.format(data);
}
}
};
</script>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#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.1.3/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.3/css/dx.light.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>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app">
</div>
</div>
</body>
</html>
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader'
},
'devextreme/localization.js': {
"esModule": true
},
'devextreme-aspnet-data-nojquery': {
'esModule': true
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@2.8.4/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.27.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@21.1.3/cjs',
'devextreme-vue': 'npm:devextreme-vue@21.1.3',
'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.0.0/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.15/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.1.31/dist/dx-gantt.js',
'@devextreme/vdom': 'npm:@devextreme/vdom@1.2.1',
'inferno': 'npm:inferno@7.4.8/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.8/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.8/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.8/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.8/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.8/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.8/dist/inferno-extras.min.js',
'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-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
},
'@devextreme/vdom': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
packageConfigPaths: [
"npm:@devextreme/*/package.json",
],
babelOptions: {
sourceMaps: false,
stage0: true
}
};
System.config(window.config);