DevExtreme Vue - OData

To access an OData service, implement the ODataStore: specify the url of an OData entity collection, the key property, and the OData version. You can also handle data-related events:

App.vue
  • <template>
  • <DxDataGrid
  • :data-source="productsStore"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxDataGrid from 'devextreme-vue/data-grid';
  • import ODataStore from 'devextreme/data/odata/store';
  •  
  • const productsStore = new ODataStore({
  • url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
  • key: 'Product_ID',
  • version: 3,
  • onLoaded: () => {
  • // Event handling commands go here
  • }
  • });
  •  
  • export default {
  • components: {
  • DxDataGrid
  • },
  • data() {
  • return {
  • productsStore
  • }
  • }
  • }
  • </script>

Data from the ODataStore can be shaped (filtered, sorted, grouped, etc.) in the DataSource.

The following example declares an ODataStore, wraps it in a DataSource, and binds the DataGrid UI component to this DataSource:

App.vue
  • <template>
  • <DxDataGrid
  • :data-source="productsDataSource"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxDataGrid from 'devextreme-vue/data-grid';
  • import ODataStore from 'devextreme/data/odata/store';
  • import DataSource from 'devextreme/data/data_source';
  •  
  • const productsStore = new ODataStore({
  • // ...
  • });
  •  
  • const productsDataSource = new DataSource({
  • store: productsStore,
  • sort: 'Product_Name'
  • });
  •  
  • export default {
  • components: {
  • DxDataGrid
  • },
  • data() {
  • return {
  • productsDataSource
  • }
  • }
  • }
  • </script>