<template>
<dx-data-grid
:show-borders="true"
:data-source="dataSource"
:remote-operations="true"
:height="600"
>
<dx-column
data-field="CustomerID"
caption="Customer"
>
<dx-lookup
:data-source="customersData"
value-expr="Value"
display-expr="Text"
/>
<dx-string-length-rule
:max="5"
message="The field Customer must be a string with a maximum length of 5."
/>
</dx-column>
<dx-column
data-field="OrderDate"
data-type="date"
>
<dx-required-rule message="The OrderDate field is required."/>
</dx-column>
<dx-column data-field="Freight">
<dx-header-filter :group-interval="100"/>
<dx-range-rule
:min="0"
:max="2000"
message="The field Freight must be between 0 and 2000."
/>
</dx-column>
<dx-column data-field="ShipCountry">
<dx-string-length-rule
:max="15"
message="The field ShipCountry must be a string with a maximum length of 15."
/>
</dx-column>
<dx-column
data-field="ShipVia"
caption="Shipping Company"
data-type="number"
>
<dx-lookup
:data-source="shippersData"
value-expr="Value"
display-expr="Text"
/>
</dx-column>
<dx-master-detail
:enabled="true"
template="masterDetailTemplate"
/>
<template #masterDetailTemplate="{ data: order }">
<master-detail-grid
:id="order.key"
:url="url"
/>
</template>
<dx-filter-row :visible="true"/>
<dx-header-filter :visible="true"/>
<dx-group-panel :visible="true"/>
<dx-scrolling mode="virtual"/>
<dx-editing
:allow-adding="true"
:allow-updating="true"
:allow-deleting="true"
mode="row"
/>
<dx-grouping :auto-expand-all="false"/>
<dx-summary>
<dx-total-item
column="Freight"
summary-type="sum"
>
<dx-value-format
:precision="2"
type="decimal"
/>
</dx-total-item>
<dx-group-item
column="Freight"
summary-type="sum"
>
<dx-value-format
:precision="2"
type="decimal"
/>
</dx-group-item>
<dx-group-item summary-type="count"/>
</dx-summary>
</dx-data-grid>
</template>
<script>
import {
DxDataGrid,
DxColumn,
DxEditing,
DxFilterRow,
DxHeaderFilter,
DxGroupPanel,
DxGrouping,
DxScrolling,
DxSummary,
DxLookup,
DxTotalItem,
DxGroupItem,
DxMasterDetail,
DxStringLengthRule,
DxRequiredRule,
DxRangeRule,
DxValueFormat
} from 'devextreme-vue/data-grid';
import MasterDetailGrid from 'MasterDetailGrid.vue';
import { createStore } from 'devextreme-aspnet-data-nojquery';
const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi';
const dataSource = createStore({
key: 'OrderID',
loadUrl: `${url}/Orders`,
insertUrl: `${url}/InsertOrder`,
updateUrl: `${url}/UpdateOrder`,
deleteUrl: `${url}/DeleteOrder`,
onBeforeSend: (method, ajaxOptions) => {
ajaxOptions.xhrFields = { withCredentials: true };
}
});
const customersData = createStore({
key: 'Value',
loadUrl: `${url}/CustomersLookup`,
onBeforeSend: (method, ajaxOptions) => {
ajaxOptions.xhrFields = { withCredentials: true };
}
});
const shippersData = createStore({
key: 'Value',
loadUrl: `${url}/ShippersLookup`,
onBeforeSend: (method, ajaxOptions) => {
ajaxOptions.xhrFields = { withCredentials: true };
}
});
export default {
components: {
DxDataGrid,
DxColumn,
DxEditing,
DxFilterRow,
DxHeaderFilter,
DxGroupPanel,
DxGrouping,
DxScrolling,
DxSummary,
DxLookup,
DxTotalItem,
DxGroupItem,
DxMasterDetail,
DxStringLengthRule,
DxRangeRule,
DxRequiredRule,
DxValueFormat,
MasterDetailGrid
},
data() {
return {
url,
customersData,
shippersData,
dataSource
};
}
};
</script>
<template>
<dx-data-grid
:data-source="dataSource"
:show-borders="true"
/>
</template>
<script>
import DxDataGrid from 'devextreme-vue/data-grid';
import { createStore } from 'devextreme-aspnet-data-nojquery';
const getMasterDetailGridDataSource = (id, url) => {
return {
store: createStore({
loadUrl: `${url}/OrderDetails`,
loadParams: { orderID: id },
onBeforeSend: (method, ajaxOptions) => {
ajaxOptions.xhrFields = { withCredentials: true };
}
})
};
};
export default {
components: { DxDataGrid },
props: {
id: {
type: Number,
default: () => 0
},
url: {
type: String,
default: () => ''
}
},
data() {
return {
dataSource: getMasterDetailGridDataSource(this.id, this.url)
};
}
};
</script>
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
components: { App },
template: '<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/19.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/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>
</body>
</html>
System.config({
transpiler: 'plugin-babel',
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js',
'devextreme': 'npm:devextreme@19.2',
'devextreme-vue': 'npm:devextreme-vue@19.2',
jszip: 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.7/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
'devexpress-gantt': 'npm:devexpress-gantt',
'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@2.5.1',
'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js',
'systemjs-babel-build':
'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js'
},
meta: {
'*.vue': { loader: 'vue-loader' },
'devextreme-aspnet-data-nojquery': {
'esModule': true
}
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});