DataGrid/TreeList - ColumnChooser - Use new TreeView api instead custom logic in ColumnChooser to restore disabled items selection (#32768)

Author: Raushen

apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx

@@ -155,6 +155,55 @@ const meta: Meta<typeof DataGrid> = {
     }
 };
 
+const columnChooserArgTypes: Partial<Meta<typeof DataGrid>['argTypes']> = {
+    'columnChooser.enabled': {
+        control: 'boolean',
+    },
+    'columnChooser.mode': {
+        control: 'radio',
+        options: ['select', 'dragAndDrop'],
+    },
+    'columnChooser.title': {
+        control: 'text',
+    },
+    'columnChooser.height': {
+        control: 'number',
+    },
+    'columnChooser.width': {
+        control: 'number',
+    },
+    'columnChooser.sortOrder': {
+        control: 'radio',
+        options: ['asc', 'desc', 'none'],
+        mapping: {
+            asc: 'asc',
+            desc: 'desc',
+            none: undefined,
+        },
+    },
+    'columnChooser.emptyPanelText': {
+        control: 'text',
+    },
+    'columnChooser.container': {
+        control: 'text',
+    },
+    'columnChooser.search.enabled': {
+        control: 'boolean',
+    },
+    'columnChooser.search.timeout': {
+        control: 'number',
+    },
+    'columnChooser.selection.allowSelectAll': {
+        control: 'boolean',
+    },
+    'columnChooser.selection.recursive': {
+        control: 'boolean',
+    },
+    'columnChooser.selection.selectByClick': {
+        control: 'boolean',
+    },
+};
+
 export default meta;
 
 type Story = StoryObj<typeof DataGrid>;
@@ -353,3 +402,46 @@ export const AiColumn: Story = {
         allowColumnReordering: true,
     },
 };
+
+export const ColumnChooserStory: Story = {
+    name: 'ColumnChooser',
+    argTypes: columnChooserArgTypes,
+    args: {
+        'columnChooser.enabled': true,
+        'columnChooser.mode': 'select',
+        'columnChooser.title': 'Choose Columns',
+        'columnChooser.height': 300,
+        'columnChooser.width': 250,
+        'columnChooser.sortOrder': undefined,
+        'columnChooser.emptyPanelText': 'Drag a column here to hide it',
+        'columnChooser.search.enabled': true,
+        'columnChooser.search.timeout': 0,
+        'columnChooser.selection.allowSelectAll': true,
+        'columnChooser.selection.recursive': true,
+        'columnChooser.selection.selectByClick': true,
+    },
+    render: (args) => (
+        <DataGrid
+            dataSource={countries}
+            keyExpr="ID"
+            showBorders={true}
+            allowColumnReordering={true}
+            {...args}
+        >
+            <Column dataField="ID" width={60} />
+            <Column dataField="Country" />
+            <Column dataField="Area" caption="Area, km²" format="fixedPoint" />
+            <Column caption="Population">
+                <Column dataField="Population_Total" caption="Total" format="fixedPoint" />
+                <Column dataField="Population_Urban" caption="Urban" format="percent" />
+                <Column dataField="Population_Rural" caption="Rural" format="percent" />
+            </Column>
+            <Column caption="GDP">
+                <Column dataField="GDP_Total" caption="Total, mln $" allowHiding={false} format="fixedPoint" />
+                <Column dataField="GDP_Agriculture" caption="Agriculture" format={{ type: 'percent', precision: 1 }} />
+                <Column dataField="GDP_Industry" caption="Industry" format={{ type: 'percent', precision: 1 }} />
+                <Column dataField="GDP_Services" caption="Services" format={{ type: 'percent', precision: 1 }} />
+            </Column>
+        </DataGrid>
+    ),
+};

packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts

@@ -345,30 +345,9 @@ export class ColumnChooserView extends ColumnsView {
 
   private _prepareSelectModeConfig() {
     const selectionOptions = this.option('columnChooser.selection') ?? {};
-
-    const updateSelection = (e, nodes) => {
-      nodes
-        .filter((node) => node.itemData.allowHiding === false)
-        .forEach((node) => e.component.selectItem(node.key));
-    };
-
-    let isUpdatingSelection = false;
-
     const selectionChangedHandler = (e) => {
-      if (isUpdatingSelection) {
-        return;
-      }
-
       const nodes = this._getOrderedFlatNodes(e.component.getNodes());
 
-      e.component.beginUpdate();
-      isUpdatingSelection = true;
-
-      updateSelection(e, nodes);
-
-      e.component.endUpdate();
-      isUpdatingSelection = false;
-
       this.component.beginUpdate();
       this._isUpdatingColumnVisibility = true;
 
@@ -382,6 +361,7 @@ export class ColumnChooserView extends ColumnsView {
       selectByClick: selectionOptions.selectByClick,
       selectNodesRecursive: selectionOptions.recursive,
       showCheckBoxesMode: selectionOptions.allowSelectAll ? 'selectAll' : 'normal',
+      disabledNodeSelectionMode: 'never',
       onSelectionChanged: selectionChangedHandler,
     };
   }
@@ -483,12 +463,6 @@ export class ColumnChooserView extends ColumnsView {
     return this.isColumnChooserVisible() && isParentColumnVisible && isColumnHidden;
   }
 
-  private allowColumnHeaderDragging(column) {
-    const isDragMode = !this.isSelectMode();
-
-    return isDragMode && this.isColumnChooserVisible() && column.allowHiding;
-  }
-
   protected getBoundingRect() {
     const that = this;
     const container = that._popupContainer?.$overlayContent();

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnChooser.integration.tests.js

@@ -443,7 +443,9 @@ QUnit.module('Column chooser', baseModuleConfig, () => {
         const field2 = band1.children[0];
         const field3 = band1.children[1];
 
-        assert.strictEqual(band1.selected, undefined, 'Band column is in intermediate state');
+        // Band column state was changed from undefined to false due to changing TreeView selection logic
+        assert.strictEqual(band1.selected, false, 'Band column is in unselected state');
+
         assert.strictEqual(field2.selected, false, 'Field 2 column is unselected');
         assert.strictEqual(field3.selected, true, 'Field 3 column is selected');
     });