Free Trial Buy
    Your search did not match any results.
    Data Grid

    OData Service

    Documentation

    This example demonstrates how to configure the DataGrid widget to display remote data accessed using the OData protocol. Specify the data store type and remote data service URL, define data shaping options, and configure grid columns.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Copy to CodeSandBox
    Apply
    Reset
    <template> <DxDataGrid :data-source="dataSource" :show-borders="true" > <DxColumn data-field="Product_ID"/> <DxColumn :width="250" data-field="Product_Name" /> <DxColumn data-field="Product_Cost" caption="Cost" data-type="number" format="currency" /> <DxColumn data-field="Product_Sale_Price" caption="Sale Price" data-type="number" format="currency" /> <DxColumn data-field="Product_Retail_Price" caption="Retail Price" data-type="number" format="currency" /> <DxColumn data-field="Product_Current_Inventory" caption="Inventory" /> </DxDataGrid> </template> <script> import 'devextreme/data/odata/store'; import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid'; export default { components: { DxDataGrid, DxColumn }, data() { return { dataSource: { store: { type: 'odata', url: 'https://js.devexpress.com/Demos/DevAV/odata/Products' }, select: [ 'Product_ID', 'Product_Name', 'Product_Cost', 'Product_Sale_Price', 'Product_Retail_Price', 'Product_Current_Inventory' ], filter: ['Product_Current_Inventory', '>', 0] } }; } }; </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/20.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.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> </div> </body> </html>
    System.config({ transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader' }, }, 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@20.1', 'devextreme-vue': 'npm:devextreme-vue@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.5', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.3', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, babelOptions: { sourceMaps: false, stage0: true } });