Your search did not match any results.
Data Grid

OData Service

To fetch data from an OData service, implement an ODataStore. Use its properties to specify the service's url, key data field, and OData version if it is different from 2.

You can configure ODataStore as a standalone element (see OData for details), but this demo assigns ODataStore settings to the store field of the DataSource configuration object. If you follow the same pattern in your application, make sure to set the store's type property to "odata".

The DataSource configuration object allows you to sort, filter, group, and otherwise shape the store's data objects. This demo filters data and selects a limited number of fields.

Backend API
Copy to CodePen
$(() => { $('#gridContainer').dxDataGrid({ showBorders: true, dataSource: { store: { type: 'odata', url: '', key: 'Product_ID', }, select: [ 'Product_ID', 'Product_Name', 'Product_Cost', 'Product_Sale_Price', 'Product_Retail_Price', 'Product_Current_Inventory', ], filter: ['Product_Current_Inventory', '>', 0], }, columns: [ 'Product_ID', { dataField: 'Product_Name', width: 250, }, { caption: 'Cost', dataField: 'Product_Cost', dataType: 'number', format: 'currency', }, { dataField: 'Product_Sale_Price', caption: 'Sale Price', dataType: 'number', format: 'currency', }, { dataField: 'Product_Retail_Price', caption: 'Retail Price', dataType: 'number', format: 'currency', }, { dataField: 'Product_Current_Inventory', caption: 'Inventory', }, ], }); });
<!DOCTYPE html> <html xmlns=""> <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" /> <script src=""></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script src="index.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> </div> </body> </html>