DevExpress-Examples · artem-kurchenko · Oct 6, 2025 · Oct 2, 2025 · Oct 2, 2025 · Oct 4, 2025
@@ -307,4 +307,5 @@ TesterMetadata.xml
 */wwwroot/*
 
 !*/wwwroot/css/Site.css
+!*/wwwroot/js/GroupSelectionBehavior.js
 *.DS_Store
@@ -1,29 +1,48 @@
 @using ASP_NET_Core.Models
 
-<h2>Home</h2>
-
-@(Html.DevExtreme().DataGrid<SampleOrder>()
+@{
+    string url = "https://js.devexpress.com/Demos/Mvc/api/DataGridWebApi";
+}
+<script>
+    var helper = new GroupSelectionBehavior();
+</script>
+@(Html.DevExtreme().DataGrid()
+    .OnInitialized("(e) => { helper.init(e.component); }")
+    .Selection(s => 
+        s.Mode(SelectionMode.Multiple)
+        .Deferred(true)
+        .AllowSelectAll(true)
+        .ShowCheckBoxesMode(GridSelectionShowCheckBoxesMode.Always)
+    )
+    .Height(800)
+    .Width(1200)
     .ShowBorders(true)
-    .DataSource(d => d.Mvc().Controller("SampleData").LoadAction("Get").Key("OrderID"))
+    .DataSource(d => d.RemoteController().LoadUrl(url + "/Orders").Key("OrderID"))
     .Columns(columns => {
-        columns.AddFor(m => m.OrderID);
-        columns.AddFor(m => m.OrderDate);
-        columns.AddFor(m => m.CustomerName);
-        columns.AddFor(m => m.ShipCountry);
-        columns.AddFor(m => m.ShipCity);
+        columns.Add().DataField("OrderID");
+        columns.Add().DataField("CustomerID").Caption("Customer")
+            .Lookup(lk => lk
+                .ValueExpr("Value")
+                .DisplayExpr("Text")
+                .DataSource(d => d.RemoteController()
+                    .LoadUrl(url + "/CustomersLookup")
+                    .Key("Value"))
+        );
+        columns.Add().DataField("OrderDate").DataType(GridColumnDataType.Date);
+        columns.Add().DataField("Freight");
+        columns.Add().DataField("ShipCountry").GroupIndex(0);
+        columns.Add().DataField("ShipCity").GroupIndex(2);
+        columns.Add().DataField("ShipVia").GroupIndex(1)
+            .Lookup(lk => lk
+                .ValueExpr("Value")
+                .DisplayExpr("Text")
+                .DataSource(d => d.RemoteController()
+                    .LoadUrl(url + "/ShippersLookup")
+                    .Key("Value"))
+        );
     })
-    .Paging(p => p.PageSize(10))
-    .FilterRow(f => f.Visible(true))
-    .HeaderFilter(f => f.Visible(true))
     .GroupPanel(p => p.Visible(true))
     .Grouping(g => g.AutoExpandAll(false))
     .RemoteOperations(true)
-    .Summary(s => s
-        .TotalItems(totalItems => {
-            totalItems.AddFor(m => m.ShipCity).SummaryType(SummaryType.Count);
-        })
-        .GroupItems(groupItems => {
-            groupItems.Add().SummaryType(SummaryType.Count);
-        })
-    )
+    .CustomizeColumns("helper.customizeColumns")
 )
@@ -9,14 +9,13 @@
     <meta name="author" content="">
 
     <title>ASP_NET_Core</title>
+
     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
-
-    @* Uncomment to use the HtmlEditor control *@
-    @* <script src="https://unpkg.com/devextreme-quill/dist/dx-quill.min.js"></script> *@
-
     <link rel="stylesheet" href="~/css/vendor.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/css/Site.css" />
+
     <script src="~/js/vendor.js" asp-append-version="true"></script>
+    <script src="~/js/GroupSelectionBehavior.js" asp-append-version="true"></script>
 </head>
 
 <body class="dx-viewport">

@@ -5,3 +5,13 @@
 body {
     margin: 8px;
 }
+
+.group-selection-check-box {
+    margin-right: 10px;
+}
+
+.group-row-flex {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
@@ -0,0 +1,137 @@
+class GroupSelectionBehavior {
+    skipCheckBoxValueHandling = false;
+    rowKeysCache = {};
+    cacheGroupRequests = true;
+    getSelectedKeysPromise;
+
+    constructor() {
+        this.customizeColumns = this.customizeColumns.bind(this);
+        this.gridSelectionChanged = this.gridSelectionChanged.bind(this);
+        this.groupTemplate = this.groupTemplate.bind(this);
+        this.getGroupRowText = this.getGroupRowText.bind(this);
+        this.initCheckBox = this.initCheckBox.bind(this);
+        this.getSelectedKeys = this.getSelectedKeys.bind(this);             
+    }
+    init(dataGrid) {
+        dataGrid.on("selectionChanged", this.gridSelectionChanged);
+    }
+    customizeColumns(columns) {
+        columns.forEach(col => {
+          col.groupCellTemplate = this.groupTemplate
+        })
+    }
+    groupTemplate(cellElement, cellData) {
+        const flex = $("<div>").addClass("group-row-flex").appendTo(cellElement);
+        const checkBoxId = this.calcCheckBoxId(cellData.component.element().attr("id"), cellData.row.key);
+        const that = this;
+        const checkBox = $("<div>").attr("id", checkBoxId).addClass("group-selection-check-box").appendTo(flex).dxCheckBox({
+            visible: false,
+            onValueChanged: function(valueArgs) {
+                if (that.skipCheckBoxValueHandling) return;
+                const childRowKeys = valueArgs.component.option("childRowKeys");
+                if (valueArgs.value)
+                    cellData.component.selectRows(childRowKeys, true);
+                else
+                    cellData.component.deselectRows(childRowKeys);
+            }
+        }).dxCheckBox("instance");
+        const loadIndicator = $("<div>").appendTo(flex).addClass("group-selection-check-box").dxLoadIndicator({
+          height: 22,
+          width: 22
+        }).dxLoadIndicator("instance");
+
+        this.getSelectedKeys(cellData.component).then((selectedKeys) => {
+            if (this.cacheGroupRequests && this.rowKeysCache[checkBoxId]) {
+            this.initCheckBox(checkBox, loadIndicator, checkBoxId, selectedKeys);
+          } else {
+            const groupedColumns = cellData.component.getVisibleColumns().filter(c => c.groupIndex >= 0).sort((a, b) => {
+              return a.groupIndex > b.groupIndex ? 1 : -1;
+            });
+            const filter = [];
+            cellData.key.forEach((key, i) => {
+              filter.push([groupedColumns[i].dataField, "=", key]);
+            });
+            const loadOptions = {
+                filter
+            };
+            const store = cellData.component.getDataSource().store();
+            store.load(loadOptions).then((data) => {
+                const keys = data.map(d => cellData.component.keyOf(d));
+                this.rowKeysCache[checkBoxId] = keys;
+                this.initCheckBox(checkBox, loadIndicator, checkBoxId, selectedKeys);
+            });
+          }
+        });
+        flex.append($("<span>").text(this.getGroupRowText(cellData)));
+    }
+    getGroupRowText(cellData) {
+      let text = `${cellData.column.caption}: ${cellData.displayValue}`;
+      if (cellData.groupContinuedMessage) text += ` (${cellData.groupContinuedMessage})`;
+      if (cellData.groupContinuesMessage) text += ` (${cellData.groupContinuesMessage})`;
+      return text;
+    }
+    initCheckBox(checkBox, loadIndicator, checkBoxId, selectedKeys) {
+      this.skipCheckBoxValueHandling = true;
+      checkBox.option({
+        visible: true,
+        value: this.areKeysSelected(this.rowKeysCache[checkBoxId], selectedKeys),
+        childRowKeys: this.rowKeysCache[checkBoxId]
+      });
+      loadIndicator.option("visible", false);
+      this.skipCheckBoxValueHandling = false;
+    }
+    getSelectedKeys(grid) {
+      if (grid.option("selection.deferred")) {
+        if (!this.getSelectedKeysPromise) {
+          this.getSelectedKeysPromise = new Promise(resolve => {
+            grid.getSelectedRowKeys().then(selectedKeys => {
+                resolve(selectedKeys);
+            });
+          });
+        }
+        return this.getSelectedKeysPromise;
+      } else {
+        return new Promise(resolve => resolve(grid.getSelectedRowKeys()));
+      }
+    }
+    repaintGroupRowTree(grid, groupRows) {
+      const topGroupRow = groupRows.filter(r => r.isExpanded).reduce((acc, curr) => {
+        return (!acc || acc.key.length > curr.key.length) ? curr : acc;
+      }, null);
+      if (topGroupRow) {
+        const affectedGroupRows = groupRows.filter(g => g.key[0] == topGroupRow.key[0]);
+        grid.repaintRows(affectedGroupRows.map(g => g.rowIndex));
+      }
+    }
+    gridSelectionChanged(e) {
+      const groupRows = e.component.getVisibleRows().filter(r => r.rowType === "group");
+      if (e.component.option("selection.deferred")) {
+        this.getSelectedKeysPromise = null;
+        if (e.component.option("selectionFilter").length === 0) {
+          e.component.repaintRows(groupRows.map(g => g.rowIndex));
+        } else {
+          this.repaintGroupRowTree(e.component, groupRows);
+        }
+      } else {
+        if (e.selectedRowKeys.length >= e.component.totalCount() || e.currentDeselectedRowKeys.length >= e.component.totalCount()) {
+          e.component.repaintRows(groupRows.map(g => g.rowIndex));
+        } else {
+          this.repaintGroupRowTree(e.component, groupRows);
+        }
+      }
+    }
+    calcCheckBoxId(gridId, groupRowKey) {
+        return gridId + "groupCheckBox" + groupRowKey.join("");
+    }
+    areKeysSelected(keysToCheck, selectedKeys) {
+        if (selectedKeys.length == 0)
+            return false;
+        const intersectionCount = keysToCheck.filter(k => selectedKeys.indexOf(k) >= 0).length;
+        if (intersectionCount === 0)
+            return false;
+        else if (intersectionCount === keysToCheck.length)
+            return true;
+        else
+            return undefined;
+    }
+}
@@ -24,6 +24,7 @@
     "@angular/router": "^18.0.3",
     "devextreme": "25.1.3",
     "devextreme-angular": "25.1.3",
+    "devextreme-aspnet-data-nojquery": "^5.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.7"