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>
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.