Looking for a multi-select tree-grid component (V24, flow)

Flow
1

I’m looking for a component that allows selection of any subset of nodes in a tree data structure. As a motivating use case, imagine writing a file backup application that allows you to choose any combination of files and directories from a very large filesystem. Something like TreeComboBox except multi-select.
I’d like icons to indicate selection of a node, with a clear indication on nodes with children if there’s a mixture of selected and unselected in the children. Something like these: GitHub - patosai/tree-multiselect.js: jQuery multiple select with nested options or React MultiSelectTree | KendoReact UI Library
I think I can implement this with TreeGrid if need be, but it would be nice if I could use something standard. Suggestions?

Thanks,
Michael

2

Hi Michael,

have you had a look at Tree Grid component | Vaadin components which extends Grid and provides Multi-Selection (see Selection | Grid | Components | Vaadin Docs) ?

3

Yes, though I’m not quite sure how to implement the node-with-mixed-selection-children indicators - perhaps I should just try it.

4

Ahhh - you’d like to implement an indeterminate state for the “folder” nodes if there not all children are selected or deselected at once?

This is possible - a collegue of mine did it recently but I’m not into the details. Thus I can’t help how you can achieve it. But it’s not a standard feature and was quite some work to do…

5

Yes exactly. I don’t necessarily need a third “state” for checkboxes, but some clear indication of consistency of children with parent state is probably needed. I’ll see what I can do if nobody else has a suggestion.

6

I’ve recently also looked into this topic.
We have an example in our cookbook of how to get the automatic children selection to work.
But I imagine that is not enough for your use case.

I haven’t done it myself, but I’ve heard about the solution of removing the default checkboxes, and instead providing your own column with a checkbox inside. That way, you can better control the selection state of it.

Here’s how to hide the default multi-select column (see the onAttach() method:

Here’s a GitHub issue requesting this feature, you can upvote it with :+1:

Here’s a GitHub issue requesting documentation for it, you can upvote it with :+1:

7

Thanks! I’ve already implemented hierarchical select/deselect without any major issues, but hiding the multi-select column would let me do the rest, I think.
I’ve upvoted both of those tickets in GitHub.
The indeterminate marker is really the difficult part though. I’ll note that it looks like there is a partial/bugged implementation of indeterminate state on the select/deselect all button in multiselect mode - if you start with everything selected then deselect a leaf, it’ll switch from a checked box to a minus box indicating indeterminate… but then if you reselect the leaf, it will stay indeterminate…

1 Like
8

I have implemented the hide-the-multiselect-column and custom partial selection column approach a couple of times now. The partial selection implementation can become kind of heavy, depending on how much data you have and how you’re fetching it. You’ll easily end up going up and down the hierarchy to apply changes to parents and children.

9

Yeah, the standard HierachicalDataProvider doesn’t seem to have an interface to move up the tree to set the indeterminate status, which is kind of my remaining pain point. In my case, the tree is small enough to keep in memory, so it is isn’t like I need to talk to a database or filesystem to get data, but still, it would be nice.