CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
MarcShayne
MarcShayne

Reputation: 87

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

I'm trying to make the Treeview not collapse every time I select a node. When node is selected it will render button depending on which node you have selected. Here is an example I made. https://codesandbox.io/s/summer-water-33fe7?file=/src/App.js

Upvotes: 1

Views: 2436

Answers (3)

Jason
Jason

Reputation: 1072

FWIW, I stumbled into this issue, as well as not being able to set the focused node (which for me, was a deal breaker).

The best answer I found was to use a Mui Nested List. Yeah, it takes a little work to make the indentation right, but it's a lot easier than dealing with TreeViews various oddities if you are really just wanting a hierarchical list.

Upvotes: 0

PR7
PR7

Reputation: 1914

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.

Upvotes: 1

MarcShayne
MarcShayne

Reputation: 87

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>
    );
  };

Upvotes: 0

Related Questions