DevExtreme jQuery - OData Service
Use the ODataStore to bind the DataGrid to data an OData service supplies. It provides an interface for loading and editing data and allows you to handle data-related events.
jQuery
$(function() { $("#gridContainer").dxDataGrid({ dataSource: new DevExpress.data.ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID", onLoaded: function () { // Event handling commands go here } }) }); });
Angular
import { DxDataGridModule } from "devextreme-angular"; import ODataStore from "devextreme/data/odata/store"; // ... export class AppComponent { productStore = new ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID", onLoaded: function () { // Event handling commands go here } }); } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
<dx-data-grid [dataSource]="productStore"> </dx-data-grid>
Data kept in the ODataStore can be processed in the DataSource, for example, it can filter data.
jQuery
$(function() { $("#gridContainer").dxDataGrid({ dataSource: new DevExpress.data.DataSource({ store: { type: "odata", url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }, filter: ["Product_Available", "=", true] }) }); });
Angular
import { DxDataGridModule } from "devextreme-angular"; import "devextreme/data/odata/store"; import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { productDataSource = new DataSource({ store: { type: "odata", url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }, filter: ["Product_Available", "=", true] }); } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
<dx-data-grid [dataSource]="productDataSource"> </dx-data-grid>
Using the following features with the ODataStore may decrease the performance because they initiate data loading for all pages:
- summary calculation
- grouping with the autoExpandAll option set to false
- a header filter with the default data source
We recommend using a Custom Source instead if you have a large amount of data and need these features.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.