Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Data Grid

    Remote Grouping

    Remote (server-side) operations can boost the DataGrid's performance on large datasets. In this demo, the DataGrid works with a million records seamlessly because they are processed on the server.

    To notify the DataGrid that it works with a pre-processed dataset, set the remoteOperations option to true.

    You can also specify options that allow the widget to load data on demand to reduce the amount of transmitted data. Set the grouping.autoExpandAll option to false to collapse all the groups at startup. Data for each group is loaded only when the user expands the group. Enable the "virtual" scrolling.mode to load only those records that come into the viewport when the grid is scrolled vertically.

    The DataGrid communicates with the server according to a protocol. Refer to the Load Data article for information on it.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Copy to CodePen
    Apply
    Reset
    var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.dataGridOptions = { dataSource: DevExpress.data.AspNet.createStore({ key: "Id", loadUrl: "https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/Sales" }), remoteOperations: { groupPaging: true }, scrolling: { mode: "virtual" }, wordWrapEnabled: true, showBorders: true, grouping: { autoExpandAll: false }, groupPanel: { visible: true }, columns: [{ dataField: "Id", dataType: "number", width: 75 }, { caption: "Subcategory", dataField: "ProductSubcategoryName", width: 150 }, { caption: "Store", dataField: "StoreName", width: 150, groupIndex: 0 }, { caption: "Category", dataField: "ProductCategoryName", width: 120, groupIndex: 1 }, { caption: "Product", dataField: "ProductName" }, { caption: "Date", dataField: "DateKey", dataType: "date", format: "yyyy-MM-dd", width: 100 }, { caption: "Amount", dataField: "SalesAmount", format: "currency", width: 100 }], summary: { groupItems: [{ column: "Id", summaryType: "count" }] } }; });
    <!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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script> <script src="https://unpkg.com/devextreme-aspnet-data@2.7.1/js/dx.aspnet.data.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" ng-app="DemoApp" ng-controller="DemoController"> <div id="gridContainer" dx-data-grid="dataGridOptions"></div> </div> </body> </html>
    #gridContainer { height: 420px; width: 100%; }