Print Page - Nested datagrid expanding oddities

trying to make a nested data grid expanded always. would be nice to have that as an option. in this example, gridata is a useState() array and mygrid is a useRef().

this expands the first row as expected

Code:

useEffect(() => {
  if (mygrid.current) {
    mygrid.current.expandRow(gridata[0]);
  }
}, [gridata])

but this only expands the last row.

Code:

useEffect(() => {
  if (mygrid.current) {
    gridata.forEach(p => {
      mygrid.current.expandRow(p);
    });
  }
}, [gridata])

but this expands all rows.

Code:

useEffect(() => {
  if (mygrid.current) {
    gridata.forEach(p => {
      setTimeout(() => {
        mygrid.current.expandRow(p);
      }, 1);
    });
  }
}, [gridata])

not sure I understand why, but if you have this issue, this is your workaround.

Additionally, updating the gridata causes the grid to collapse all rows automatically. Would be handy to have a parameter that could default a row expanded or not based on the row data, that way we could flag the new data for which rows should be expanded after the refresh.

This issue has been solved. The 'expandField' property(default value is '_expanded') can be used to set the field of a row to specify the expanded status. Please call this code to expand all the rows.

Code:

const data = griddata.slice();
data.forEach(row => row._expanded = true)
setGriddata(data);

Make sure to update to the newest version.

EasyUI Forum

General Category => EasyUI for React => Topic started by: chrwei on January 22, 2021, 02:52:18 PM