Skip to content

TreeView: provide a way to control ability to select nodes - change disabled behavior #32512

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dmlvr wants to merge 28 commits into
base: 26_1
Choose a base branch
from
Open

TreeView: provide a way to control ability to select nodes - change disabled behavior #32512

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
ba898bb
update colors for disabled state
dmlvr Feb 16, 2026
77972eb
modified card view column chooser etalons
dmlvr Feb 16, 2026
cc07f39
update treeview styles
dmlvr Feb 16, 2026
df8bc20
prevent selection for disabled nodes when SelectByClick is enabled
dmlvr Feb 16, 2026
c0a61b1
add testcase for selectByClick true and disabled: true item
dmlvr Feb 16, 2026
38604cb
update fileManager tests with treeview disabled state checking
dmlvr Feb 16, 2026
c8d20a8
resolve CP conflict
dmlvr Feb 16, 2026
9ee526a
update expanded test for treeview
dmlvr Feb 17, 2026
3bb93db
modified treeview component
dmlvr Feb 17, 2026
4478819
update optionChange test
dmlvr Feb 17, 2026
0255841
fix typo
dmlvr Feb 17, 2026
e10aa8e
some update for treeview component
dmlvr Feb 17, 2026
5532fd2
fix expanded test name
dmlvr Feb 17, 2026
ec7e02a
update some tests
dmlvr Feb 17, 2026
7eac00b
fix test and some part by copilot review
dmlvr Feb 17, 2026
949889a
fix lint problem and improve kbn test
dmlvr Feb 17, 2026
b1c35fa
update ITEM_CONTENT_CLASS for test
dmlvr Feb 17, 2026
a929cc0
update columnChooser testcafe model
dmlvr Feb 17, 2026
d63ffa0
update checkboxes colors in the fluent theme
dmlvr Feb 17, 2026
323c14a
update checkboxes colors in the fluent theme
dmlvr Feb 17, 2026
c428feb
fix lint problems for scss
dmlvr Feb 17, 2026
e02e771
some fix material color
dmlvr Feb 17, 2026
7d50839
Apply suggestion from @Copilot
dmlvr Feb 17, 2026
7c0e3a9
update treeView tests
dmlvr Feb 17, 2026
867ad1b
some updates for scss colors
dmlvr Feb 17, 2026
80dfd92
Merge branch '3249_26_1_tree_view_control_ability_select_nodes' of gi…
dmlvr Feb 17, 2026
8eddd30
update etalon for card-view column-chooser after change colors
dmlvr Feb 17, 2026
3f9494b
Merge branch '26_1' into 3249_26_1_tree_view_control_ability_select_n…
dmlvr Feb 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ...olumnChooser/etalons/card-view_column-chooser_drag_mode (fluent.blue.light).png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...umnChooser/etalons/card-view_column-chooser_select_mode (fluent.blue.light).png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent/treeView/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,19 @@ $treeview-item-selected-color: $treeview-color !default;
$treeview-item-selected-bg: $base-selected-bg !default;
$treeview-spin-icon-color: $base-spin-icon-color !default;
$checkbox-border-color-focused: $base-accent-active !default;
$treeview-checkbox-disabled-border-color-focused: null !default;
$treeview-checkbox-disabled-background-focused: null !default;
$treeview-item-content-disabled: null !default;

@if $mode == "light" {
$treeview-item-content-disabled: color.scale($base-bg, $lightness: -25.88%);
$treeview-checkbox-disabled-border-color-focused: color.scale($base-bg, $lightness: -29.8%);
$treeview-checkbox-disabled-background-focused: color.scale($base-bg, $lightness: -7.84%);
}

@if $mode == "dark" {
$treeview-item-content-disabled: color.change($base-bg, $lightness: 36.08%, $space: hsl);
$treeview-checkbox-disabled-border-color-focused: color.change($base-bg, $lightness: 41.96%, $space: hsl);
$treeview-checkbox-disabled-background-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl);
}

23 changes: 23 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent/treeView/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,32 @@
}
}
}

.dx-checkbox.dx-state-disabled {
.dx-checkbox-icon {
background-color: $treeview-checkbox-disabled-background-focused;
border-color: $treeview-checkbox-disabled-border-color-focused;
}

&.dx-checkbox-checked {
.dx-checkbox-icon {
color: $treeview-checkbox-disabled-border-color-focused;
}
}

&.dx-checkbox-indeterminate {
.dx-checkbox-icon::before {
background-color: $treeview-checkbox-disabled-border-color-focused;
}
}
}
}
}

.dx-treeview-item-content.dx-state-disabled {
color: $treeview-item-content-disabled;
}

@include default-expander-icon(
'chevrondown',
'chevronright',
Expand Down
10 changes: 9 additions & 1 deletion packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ $treeview-border-color: $base-border-color !default;
$treeview-item-selected-color: null !default;
$treeview-item-selected-bg: null !default;
$treeview-item-selected-hover-bg: null !default;
$treeview-item-content-disabled: null !default;

/**
* $name 120. Arrow icon color
Expand All @@ -52,6 +53,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
$treeview-item-selected-bg: color.change($base-accent, $alpha: 0.48) !default;
$treeview-item-selected-hover-bg: color.change($base-accent, $alpha: 0.3) !default;
$treeview-spin-icon-color: $base-header-color !default;
$treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl);
}

@if $color == "contrast" {
Expand All @@ -63,6 +65,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
$treeview-item-selected-bg: $base-inverted-bg !default;
$treeview-item-selected-hover-bg: $base-inverted-bg !default;
$treeview-spin-icon-color: $base-icon-color !default;
$treeview-item-content-disabled: color.scale($base-text-color, $lightness: -48.24%);
}

@if $color == "dark" {
Expand All @@ -75,6 +78,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
$treeview-item-selected-bg: color.change(#fff, $alpha: 0.12) !default;
$treeview-item-selected-hover-bg: color.change(#fff, $alpha: 0.09) !default;
$treeview-spin-icon-color: $base-icon-color !default;
$treeview-item-content-disabled: color.change($base-text-color, $lightness: 51.8%, $space: hsl);
}

@if $color == "darkmoon" {
Expand All @@ -87,6 +91,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
$treeview-item-selected-bg: color.change(#748fbc, $alpha: 0.42) !default;
$treeview-item-selected-hover-bg: color.change(#748fbc, $alpha: 0.3) !default;
$treeview-spin-icon-color: $base-icon-color !default;
$treeview-item-content-disabled: color.scale($base-text-color, $lightness: -48.24%);
}

@if $color == "darkviolet" {
Expand All @@ -99,6 +104,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
$treeview-item-selected-bg: color.change($base-accent, $alpha: 0.46) !default;
$treeview-item-selected-hover-bg: color.change($base-accent, $alpha: 0.6) !default;
$treeview-spin-icon-color: $base-header-color !default;
$treeview-item-content-disabled: color.change($base-text-color, $saturation: 0%, $lightness: 51.76%, $space: hsl);
}

@if $color == "greenmist" {
Expand All @@ -111,6 +117,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
$treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default;
$treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.2) !default;
$treeview-spin-icon-color: $base-icon-color !default;
$treeview-item-content-disabled: color.change($base-text-color, $saturation: 0%, $lightness: 60%, $space: hsl);
}

@if $color == "light" {
Expand All @@ -123,6 +130,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
$treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default;
$treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.07) !default;
$treeview-spin-icon-color: $base-icon-color !default;
$treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl);
}

@if $color == "softblue" {
Expand All @@ -135,5 +143,5 @@ $generic-treeview-focused-row-load-indicator-color: #fff;
$treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default;
$treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.15) !default;
$treeview-spin-icon-color: $base-icon-color !default;
$treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl);
}

4 changes: 4 additions & 0 deletions packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,7 @@
}
}
}

.dx-treeview-item-content.dx-state-disabled {
color: $treeview-item-content-disabled;
}
2 changes: 1 addition & 1 deletion packages/devextreme-scss/scss/widgets/material/treeView/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ $treeview-border-color: $base-border-color !default;
$treeview-item-selected-color: $treeview-color !default;
$treeview-item-selected-bg: null !default;
$treeview-spin-icon-color: $base-spin-icon-color !default;

$checkbox-border-color-focused: $base-focus-bg !default;
$treeview-item-content-disabled: color.change($base-text-color, $alpha: 0.38);

@if $mode == "light" {
$treeview-item-selected-bg: color.change(#000, $alpha: 0.12) !default;
Expand Down
4 changes: 4 additions & 0 deletions packages/devextreme-scss/scss/widgets/material/treeView/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@
}
}

.dx-treeview-item-content.dx-state-disabled {
color: $treeview-item-content-disabled;
}

@include treeview-item(
$material-treeview-item-element-gap,
$material-treeview-item-padding,
Expand Down
40 changes: 18 additions & 22 deletions packages/devextreme/js/__internal/ui/tree_view/tree_view.base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const OPENED_NODE_CONTAINER_CLASS = `${NODE_CLASS}-container-opened`;
const IS_LEAF = `${NODE_CLASS}-is-leaf`;

export const ITEM_CLASS = `${WIDGET_CLASS}-item`;
export const ITEM_CONTENT_CLASS = `${WIDGET_CLASS}-item-content`;
const ITEM_WITH_CHECKBOX_CLASS = `${ITEM_CLASS}-with-checkbox`;
const ITEM_WITH_CUSTOM_EXPANDER_ICON_CLASS = `${ITEM_CLASS}-with-custom-expander-icon`;
const CUSTOM_EXPANDER_ICON_ITEM_CONTAINER_CLASS = `${WIDGET_CLASS}-custom-expander-icon-item-container`;
Expand All @@ -76,6 +77,7 @@ export const SELECT_ALL_ITEM_CLASS = `${WIDGET_CLASS}-select-all-item`;

const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
const DISABLED_STATE_CLASS = 'dx-state-disabled';
const DISABLED_STATE_ARIA = 'aria-disabled';
const SELECTED_ITEM_CLASS = 'dx-state-selected';
const EXPAND_EVENT_NAMESPACE = 'dxTreeView_expand';
const DATA_ITEM_ID = 'data-item-id';
Expand Down Expand Up @@ -103,7 +105,6 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_dataSource!: any;

// eslint-disable-next-line no-restricted-globals
_setFocusedItemTimeout?: ReturnType<typeof setTimeout>;

_$selectAllItem?: dxElementWrapper;
Expand Down Expand Up @@ -884,10 +885,6 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
this.setAria('selected', nodeData.selected, $node);
this._toggleSelectedClass($node, nodeData.selected);

if (nodeData.disabled) {
this.setAria('disabled', nodeData.disabled, $node);
}

super._renderItem(
this._renderedItemsCount + nodeIndex,
// @ts-expect-error ts-error
Expand Down Expand Up @@ -998,8 +995,18 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
_postprocessRenderItem(args: PostprocessRenderItemInfo<TreeViewNode>): void {
const { itemData, itemElement } = args;

const node = this._getNode(itemData);

if (node?.internalFields.disabled) {
const $itemContent = $(itemElement).find(`.${ITEM_CONTENT_CLASS}`);
$(itemElement).removeClass(DISABLED_STATE_CLASS);
$(itemElement).removeAttr(DISABLED_STATE_ARIA);
$itemContent.addClass(DISABLED_STATE_CLASS);
$itemContent.attr(DISABLED_STATE_ARIA, true);
}

if (this._showCheckboxes()) {
this._renderCheckBox(itemElement, this._getNode(itemData));
this._renderCheckBox(itemElement, node);
}

super._postprocessRenderItem(args);
Expand Down Expand Up @@ -1148,9 +1155,6 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
if (!node) {
return Deferred().reject().promise();
}
if (node.internalFields.disabled) {
return Deferred().reject().promise();
}

const currentState = node.internalFields.expanded;
if (currentState === state) {
Expand Down Expand Up @@ -1207,10 +1211,6 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
$icon.appendTo(this._getItem($node));
$icon.addClass(iconClass);

if (node.internalFields.disabled) {
$icon.addClass(DISABLED_STATE_CLASS);
}

this._renderToggleItemVisibilityIconClick($icon, node);
}

Expand All @@ -1229,10 +1229,6 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
$node.parent().addClass(OPENED_NODE_CONTAINER_CLASS);
}

if (node.internalFields.disabled) {
$icon.addClass(DISABLED_STATE_CLASS);
}

this._renderToggleItemVisibilityIconClick($icon, node);
}

Expand Down Expand Up @@ -1569,11 +1565,11 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,

_toggleNodeDisabledState(node: TreeViewNode, state: boolean): void {
const $node = this._getNodeElement(node);
const $item = $node.find(`.${ITEM_CLASS}`).eq(0);
const $itemContent = $node.find(`.${ITEM_CONTENT_CLASS}`).eq(0);

this._dataAdapter.toggleNodeDisabledState(node.internalFields.key, state);

$item.toggleClass(DISABLED_STATE_CLASS, !!state);
$itemContent.toggleClass(DISABLED_STATE_CLASS, !!state);

if (this._showCheckboxes()) {
const checkbox = this._getCheckBoxInstance($node);
Expand Down Expand Up @@ -1889,7 +1885,7 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,

const node = this._getNodeByElement($item);

if (!node) return;
if (!node || node.internalFields.disabled) return;

this._itemDXEventHandler(e, 'onItemClick', {
node: this._dataAdapter.getPublicNode(node),
Expand Down Expand Up @@ -1988,7 +1984,7 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
}

_findNonDisabledNodes($nodes: dxElementWrapper): dxElementWrapper {
return $nodes.not(`:has(>.${ITEM_CLASS}.${DISABLED_STATE_CLASS})`);
return $nodes.not(`:has(>.${ITEM_CONTENT_CLASS}.${DISABLED_STATE_CLASS})`);
}

_moveFocus(location: string, e: DxEvent<KeyboardEvent>): void {
Expand Down Expand Up @@ -2105,7 +2101,7 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
}

_getClosestNonDisabledNode($node: dxElementWrapper): dxElementWrapper {
const isNodeDisabled = ($el: dxElementWrapper): boolean => $el.children(`.${ITEM_CLASS}.${DISABLED_STATE_CLASS}`).length > 0;
const isNodeDisabled = ($el: dxElementWrapper): boolean => $el.children(`.${ITEM_CONTENT_CLASS}.${DISABLED_STATE_CLASS}`).length > 0;

let currentNode = $node;

Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/testing/helpers/fileManagerHelpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export const Consts = {
GRID_DATA_ROW_CLASS: 'dx-data-row',
FILE_ACTION_BUTTON_CLASS: 'dx-filemanager-file-actions-button',
FOLDERS_TREE_VIEW_ITEM_CLASS: 'dx-treeview-item',
FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS: 'dx-treeview-item-content',
FOLDERS_TREE_VIEW_ITEM_TOGGLE_CLASS: 'dx-treeview-toggle-item-visibility',
FOLDERS_TREE_VIEW_ITEM_TOGGLE_OPENED_CLASS: 'dx-treeview-toggle-item-visibility-opened',
BREADCRUMBS_CLASS: 'dx-filemanager-breadcrumbs',
Expand Down
4 changes: 2 additions & 2 deletions ...evextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnChooser.integration.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -466,10 +466,10 @@ QUnit.module('Column chooser', baseModuleConfig, () => {
// act
dataGrid.showColumnChooser();

const items = $('.dx-item.dx-treeview-item');
const item = $('.dx-item.dx-treeview-item').eq(2).find('.dx-treeview-item-content');

// assert
assert.ok(items.eq(2).hasClass('dx-state-disabled'), 'Column with allowHiding=false is disabled');
assert.ok(item.hasClass('dx-state-disabled'), 'Column with allowHiding=false is disabled');
});

QUnit.test('Column chooser search.editorOptions option should work', function(assert) {
Expand Down
Loading
Loading