DevExtreme jQuery/JS - 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:

index.js
  • $(function() {
  • var productsStore = new DevExpress.data.ODataStore({
  • url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
  • key: "Product_ID",
  • version: 3,
  • onLoaded: function() {
  • // Event handling commands go here
  • }
  • });
  •  
  • $("#dataGridContainer").dxDataGrid({
  • dataSource: productsStore
  • });
  • });

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:

index.js
  • $(function() {
  • var productsStore = new DevExpress.data.ODataStore({
  • // ...
  • });
  •  
  • var productsDataSource = new DevExpress.data.DataSource({
  • store: productsStore,
  • sort: "Product_Name"
  • });
  •  
  • $("#dataGridContainer").dxDataGrid({
  • dataSource: productsDataSource
  • });
  • });