Your search did not match any results.
Data Grid

Custom Data Source

API Reference
If you need to access a data source, which is not supported by DevExtreme data layer out of the box, implement your own data access logic. Create a CustomStore instance and implement the load and totalCount methods within it. Pass the created instance to the grid’s dataSource option. Additionally, define data shaping options and configure grid columns.
Copy to Codepen
Apply
Reset
$(function(){ var orders = new DevExpress.data.CustomStore({ load: function (loadOptions) { var deferred = $.Deferred(), args = {}; if (loadOptions.sort) { args.orderby = loadOptions.sort[0].selector; if (loadOptions.sort[0].desc) args.orderby += " desc"; } args.skip = loadOptions.skip || 0; args.take = loadOptions.take || 12; $.ajax({ url: "https://js.devexpress.com/Demos/WidgetsGallery/data/orderItems", data: args, success: function(result) { deferred.resolve(result.items, { totalCount: result.totalCount }); }, error: function() { deferred.reject("Data Loading Error"); }, timeout: 5000 }); return deferred.promise(); } }); $("#gridContainer").dxDataGrid({ dataSource: { store: orders }, remoteOperations: { sorting: true, paging: true }, paging: { pageSize: 12 }, pager: { showPageSizeSelector: true, allowedPageSizes: [8, 12, 20] }, columns: [ "OrderNumber", "OrderDate", "StoreCity", "StoreState", "Employee", { dataField: "SaleAmount", format: "currency" } ] }).dxDataGrid("instance"); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> </div> </body> </html>
#gridContainer { width: 100%; }