Kembangkan dan runtuhkan semua nod dalam MUI DataGrid melalui pengaturcaraan ReactJS

Question

Bagaimana untuk membuat semua baris berkembang/diruntuhkan secara pengaturcaraan dalam DataGrid

Apa yang telah saya cuba? Saya menggunakan sifat defaultGroupingExpansionDepth

export const EXPAND_ALL = -1;
eksport const COLLAPSE_ALL = 0;
...
const [expandedState, setExpandedState] = useState(COLLAPSE_ALL);
...

kembalikan 
        
             setExpandedState(EXPAND_ALL)}>Kembangkan semua
             setExpandedState(COLLAPSE_ALL)}>Runtuhkan semua
        
        
    ;
Masalahnya, butang ini hanya berfungsi apabila pokok itu tidak 
Sebaik sahaja saya mengembangkan sebahagian grid pokok, butang tidak lagi berfungsi. Bagaimanakah saya boleh membuat butang ini berfungsi tanpa mengira keadaan semasa grid pokok yang dikembangkan/diruntuhkan? 
            

Answer 1

Nampaknya anda menggunakan sifat defaultGroupingExpansionDepth untuk mengawal keadaan pengembangan awal DataGrid, tetapi ia mungkin tidak mengemas kini secara dinamik semasa anda mengembangkan atau meruntuhkan baris. Untuk menjadikan butang berfungsi dalam keadaan kembangan/runtuh semasa, anda boleh menggunakan kaedah terkawaluntuk mengurus keadaan dikembangkan:

<DataGridPro
    treeData
    apiRef={dataGridApi}
    groupingExpansionState={expandedState === EXPAND_ALL}
    onGroupingExpandedChange={(params) =>
      setExpandedState(params.expanded ? EXPAND_ALL : COLLAPSE_ALL)
    }
    // ...
  />