React.js Mui Treeview: How to make on nodeselect not collapse

Viewed 539
2 Answers

TreeItem has a disabled prop which will not allow user to collapse the TreeItem on click. You can dynamically set the value of the disabled prop when you do not want it to collapse.

For example :

const [disabled, setDisabled] = useState(true);

<TreeItem nodeId="5" label="Five" disabled={disabled}>

// setDisabled(false); // Set to false when we want it to be collapsable.

I found a way but not sure if this is the best way so basically I added all the ids that I want to be expanded all the time a.k.a every i.d in the data.

const DataTreeView = ({ treeItems }) => {
    return (
      <TreeView
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
        defaultExpanded={[
          "root",
          "root2",
          "Parent 1",
          "Parent 2",
          "Parent 3",
          "Parent 4",
          "1",
          "2",
          "3",
          "4"
        ]}
        onNodeSelect={action}
      >
        {getTreeItemsFromData(treeItems)}
      </TreeView>
    );
  };
Related