jakezatecky / react-checkbox-tree

A simple and elegant checkbox tree for React.

Home Page:https://jakezatecky.github.io/react-checkbox-tree/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How Can i check/uncheck all nodes ?

MohammedSaberMohammed opened this issue · comments

i need a button like open/collapse all in order to check all nodes, How can i do that?
i'll be glad if you can provide an example.
Thanks in Advance.

There is a property, showExpandAll, that will add a button to the top right of the component and allows users to collapse and open all nodes. For checking/unchecking all nodes, the only way to do this would be to create a top level node that contains all other nodes.

An additional property, like showCheckAll, may be added in the future.

I made a Function to handle this logic

I made a Function to handle this logic

Can you share that function? I'm also needing to select all the nodes. I like this library but it's very surprising to me that there isn't this option yet, as it's an extremely common use case.

@JamesBrightman
Here is my component you can check the whole functionality
checkboxtree

@MohammedSaberMohammed
Thanks, my code is quite different to yours but I was able to use your idea of a recursive select all with a manually added Select all checkbox. Here's the example code for mine;

const selectAll = () => {
       let results: string[] = [];

       const extractVal = (nodes) => {
           nodes.forEach((e) => {
               results.push((e.value).toString());
               if (e.children) {
                   extractVal(e.children);
               }
           });
       };
       extractVal(nodes); //Begin recursion on master node list
       setChecked(results); //Set checkboxes to checked state
   };