How to manage selections using checkbox?

[jzarei1996]

Hi everyone.

According to your document and based on my needs, I have put a component to manage nodes. I want to put a checkbox next to the node name and use it to handle selected items. I want to do single selection as well as multiple selection and all selection with the help of check box. How do I do this? Actually, I don't understand the document very well for managing the selected ones. Please guide me with an example that uses a checkbox. Thanks.

[jzarei1996]

I am using version 3.0.2 of this package and I have used check box to select multiple. But according to your document, the node.selectMulti() and tree.selectMulti() functions do not work. Why? I used them in onChange checkbox but it doesn't work?

[jameskerr]

I don't have a time to put up an example, but I will consider this in future versions of the docs. Good luck! I do know of other users who have gotten the checkbox tree to work. Maybe they could chime in here how they did it. Also search the issues for "checkbox" you may find something useful.

[Etsija]

I would really appreciate a working example of multiselection check boxes, as I cannot get anything to work: at all given time, only one of the checkboxes is checked, and by clicking the checkbox again it doesn't deselect. I can get multiple checkboxes to get checked only with shift-clicking, but that's really not the answer.

In my Node component I'm trying this (and tried many variants of it:

            {isSelectionMode && (
                <Checkbox
                    className="p-0"
                    checked={isSelected}
                    onClick={() => tree.selectMulti(id)}
                    id={id}
                />
            )}

[Etsija]

Anyone have any examples of multiselect? I was forced to implement the feature with a special "selection mode" of the tree, that, when on, renders all nodes with checkboxes, then handling the selection manually with useState() for all selected nodes.

[Pancham97]

I got around it with a hacky solution:
#243 (comment)