[TreeView] Add checkbox support

[cpdwyer]

Thanks for the Component, it works really well. Unfortunately I have come across on problem in the implementation which I can't seem to find a workaround for.

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I am looking to use the TreeView / TreeItem components with a check box on each row. Ideally I would like a prop to suppress the event that expands and collapses the tree if the CheckBox is clicked. Or maybe a prop to enable a checkbox with a prop to set the value and a call back when clicked that also avoids the list toggle.

At the moment when a check box is toggled it also expands and collapses the tree when the node has children.

Thank You.

Examples 🌈

This is the current code...

const checkBoxClicked = (event, checked, id) => {
   setOrgStructureElement(checked, id, selected, orgStructure);
};

const createOrgStructureLevel = orgStructureElement => {
   const elements = [];

    orgStructureElement.forEach((v, k) => {
      const { id, children } = v;
      if (k.length !== 0) {
        const label = (
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Checkbox
              id={`checkbox-${k}`}
              className={classes.globalFilterCheckbox}
              checked={selected.has(id)}
              onChange={(event, checked) => checkBoxClicked(event, checked, id)}
              color="primary"
            />
            <Typography variant="caption">{k}</Typography>
          </div>
        );
        elements.push(
          children && children.length > 0 ? (
            <TreeItem key={id} nodeId={id} label={label}>
              {createOrgStructureLevel(children)}
            </TreeItem>
          ) : (
            <TreeItem key={id} nodeId={id} label={label} />
          ),
        );
      } else if (children) {
        elements.push(createOrgStructureLevel(children));
      }
    });
    return elements;
  };

  const handleExpanded = (nodeId, nodeExpanded) => {
    // cache expanded nodes
    if (nodeExpanded) {
      addOpenOrgStructurePanel(nodeId);
    } else {
      removeOpenOrgStructurePanel(nodeId);
    }
  };

  return (
    <TreeView
      defaultExpanded={openOrgStructurePanels}
      onNodeToggle={(nodeId, nodeExpanded) => handleExpanded(nodeId, nodeExpanded)}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}>
      {orgStructure.length !== 0 ? createOrgStructureLevel(orgStructure) : null}
    </TreeView>
  )
};

Motivation 🔦

see above

[mbrookes]

@cdwyer-cognito does Event.stopPropogation in the checkbox click handler help?

[thclark]

@mbrookes I can confirm no, Event.stopPropagation() doesn't help. Using the following handler:

  handleCheck(event) {
    // Prevent the checkbox-clicked event from firing the collapse/expand action on the tree
    // This makes no difference to behaviour
    event.stopPropagation()
    console.log('CHECKBOX CHANGED')
  }

@cdwyer-cognito did you fix this in the end?

[thclark]

Ok. fixed.

After delving into the mui code, I realised the problem here. The Checkbox is handling the onChange event from its base input, not an onClick.

So capturing the onChange and stopping it from propagating won't do any good - the original onClick event bubbles up the DOM to the TreeItem where it's handled here. Sigh.

Anyhoo, simple fix is to give the checkbox an onClick handler as well as an onChange handler. This isn't documented in the checkbox api, but it ends up being given to the IconButton here

So here's a Checkbox which will work for this purpose:

<Checkbox
    id={`checkbox-${yourId}`}
    checked={isChecked}
    onChange={(e, checked) => (console.log('you checked it!', checked)}
    onClick={e => (e.stopPropagation())}
    {...props}
/>

[cpdwyer]

So sorry, I've not looked at this thread for a while. That looks a good solution, I'll give it a go and let you know. Thank you

[cpdwyer]

Great, that works perfectly. I had tried to stop the propergation on the onChange, I understand why that didn't work now. Thank you again.

[ReactWithRajesh]

can you shair current code of checkbox treeview

[dnquang1996vn]

@RjSingh1529 my solution in typescript
https://codesandbox.io/s/typescript-data-driven-treeview-dhkx2?file=/src/App.tsx