Styling/Selecting a node in DBTreeeview

Questions
1

For NG1, I can style the selected node for a DBTreeview with a background color spanning over the whole width and allowing the selection of the node in any part of the row.

With Developer 2023.12 and using NG2, I use the selector

.tree-node-active {
	background-color: #b2d8ff;
}

which has 2 drawbacks. Clicking on a level 1 node, it also selects ALL of the child nodes, which of course is not wanted as it is senseless. Second, selecting the node somewhere outside of the text does NOT select the node.

I am looking for a node styling which allows the selection of the node outside the text as well, i. e. selecting the node anywhere in the row, and of course does not select all child node when selecting the parent node (level 1 node in my case).

See in the attached screenshots the selection of a level 2 node (which looks good but selection happens only when clicking on the text part), and the selection of a level 1 node “automatically” selects ALL child nodes.

This seems to be a bug or I am missing the correct styling selector(s)?

Regards,

Selecting a child node selects it only when clicked on the text.png
Selecting a child node selects it only when clicked on the text.png220×327 12 KB

Selecting node PERSONEN selects all child nodes.png
Selecting node PERSONEN selects all child nodes.png219×510 14.8 KB

2

Hi Robert,

In order to do this, you have to be more specific on the selector.

.tree-node-active > tree-node-wrapper > .node-wrapper

This selector should do the job

3

Hi Marc

Thanks for your remark about to be more specific. Using your selector and adding selectors about the content (text part, i. e. menu name) does the trick. Now the whole selected row (of the menu) has the desired color.

.tree-node-active > tree-node-wrapper > .node-wrapper, .node-content-wrapper.node-content-wrapper-active:hover, .node-content-wrapper-active.node-content-wrapper-focused {
	background-color: #b2d8ff;
}

What is still open is that the menu node can only be selected on the menu name, not on the whole row, e. g. on the right (empty) side of the menu name. But this seems something to be solved on the tree itself. It works perfectly on a treeview component. But then, this is styled completely different.

Have a good day and best regards
Robert