[data grid] I want one row of the tree data to be expanded by default

[mahammahmood]

The problem in depth

1. I want the itinerary to automatically expand when I click 'Add Itinerary,' so I can see the new itinerary without needing to manually click the expand icon. Currently, the itinerary does not expand by default after adding it. For example, in the picture, I added the itinerary, but it is not expanded.
   

2. The completion count for the itinerary shows 3/4. However, if all its children are completed, the count should be 4/4. I need the parent itinerary to be considered completed when all its children are completed.
   

3 The direct child does not display any completion count. I would like the count to be displayed for the child as well, such as on Itinerary 1 the count should 3/3 in this case.

Here is the example
https://stackblitz.com/edit/react-sj2kwa?file=customGridTreeDataGroupingCell.tsx,Demo.tsx

For point 1 I have implemented this code:

  useEffect(() => {
    if (rowNode?.type === 'group' && rowNode.groupingKey === 'Itinerary') {
     const childrenExpanded = !rowNode.childrenExpanded;

      apiRef.current.setRowChildrenExpansion(rowNode.id, childrenExpanded);
    }
  }, [rowNode?.type, rowNode?.id, apiRef]);

but it only expand it when i added for the first time.

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Data, Grid, Premium, Tree, Data, row, Expanded
Order ID: 91010

[KenanYusuf]

Hi @mahammahmood thanks for linking your example.

1. I want the itinerary to automatically expand when I click 'Add Itinerary,'

Instead of using a React.useEffect, you can use the data grid's built in isGroupExpandedByDefault prop. You can add whatever logic you like to decide whether or not a node is opened when the grid mounts or an item is added. Something like this could work in your case:

isGroupExpandedByDefault={(node) => {
  if (typeof node.groupingKey === 'string') {
    return node.groupingKey.includes('Itinerary');
  }
  return false;
}}

For 2 and 3, I can see you're handling displaying the completion count for Itinerary and progress for Itinerary 1 within your customGridTreeDataGroupingCell - you should be able to update the logic there to display each piece of information at both levels. Is there any data from the grid that you're missing to be able to do this?

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.