OData Service

To bind the DataGrid to data provided by an OData service, use the ODataStore. It provides an interface for loading and editing data, and allows you to handle data-related events.

JavaScript
$(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
            }
        })
    });
});

Data kept in the ODataStore can be processed in the DataSource. For example, the DataSource can filter data.

JavaScript
$(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]
        })
    });
});

Note that the use of the features listed below with the ODataStore may cause a significant delay, because they initiate data loading for all pages.

If you have a large amount of data and need these features, we recommend you use a Custom Source instead.

View Demo

See Also