DataGrid: Fix searched text highlighting for group rows in React (T80…

…8974) (#9517)
DevExpress · Sep 2, 2019 · dd6ed7a · dd6ed7a
1 parent 23c40ce
commit dd6ed7a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/js/ui/grid_core/ui.grid_core.search.js b/js/ui/grid_core/ui.grid_core.search.js
@@ -285,8 +285,12 @@ module.exports = {
                     if(!$parent.length) {
                         $parent = $("<div>").append(cellElement);
                     } else if(column) {
-                        columnIndex = that._columnsController.getVisibleIndex(column.index);
-                        $items = $parent.children("td").eq(columnIndex).find("*");
+                        if(column.groupIndex >= 0 && !column.showWhenGrouped) {
+                            $items = cellElement;
+                        } else {
+                            columnIndex = that._columnsController.getVisibleIndex(column.index);
+                            $items = $parent.children("td").eq(columnIndex).find("*");
+                        }
                     }
                     $items = $items && $items.length ? $items : $parent.find("*");
 

diff --git a/testing/tests/DevExpress.ui.widgets.dataGrid/rowsView.tests.js b/testing/tests/DevExpress.ui.widgets.dataGrid/rowsView.tests.js
@@ -1059,6 +1059,42 @@ QUnit.test("Highlighting search text for boolean column with set to 'falseText'
     assert.strictEqual(getNormalizeMarkup($cells.eq(0)), "<span class=" + searchTextClass + ">No</span>", "highlight text in cell");
 });
 
+QUnit.test("Highlighting search text for group row if templatesRenderAsynchronously is true (T808974)", function(assert) {
+    // arrange
+    var columns = [{
+            allowCollapsing: true,
+            allowFiltering: true,
+            cssClass: "dx-command-expand",
+            groupIndex: 0,
+            command: "expand",
+            caption: "Group",
+            dataType: "string"
+        }, {
+            allowFiltering: true,
+            dataType: "string",
+            dataField: "name"
+        }],
+        rowsView = this.createRowsView([
+            { data: { key: "TestGroup", items: null }, values: ["TestGroup"], rowType: "group", groupIndex: 0 }
+        ], null, columns),
+        $testElement = $("#container"),
+        $cells;
+
+    this.options.searchPanel = {
+        highlightSearchText: true,
+        text: "Test"
+    };
+    this.options.templatesRenderAsynchronously = true;
+
+    // act
+    rowsView.render($testElement);
+    this.clock.tick();
+
+    // assert
+    $cells = $testElement.find(".dx-group-row").find("td");
+    assert.strictEqual(getNormalizeMarkup($cells.eq(1)), "Group: <span class=dx-datagrid-search-text>Test</span>Group", "highlight text in cell");
+});
+
 QUnit.test('All rows are not isSelected by default', function(assert) {
     // arrange
     var rowsView = this.createRowsView(this.items),