Hi,
I am using Bryntum Grid v5.5.5 with the React wrapper. I would like to use dynamic row heights for the Grid, so I set autoHeight: true
on a column.
const gridConfig = {
columns: [
{
flex: 1,
field: 'name',
renderer: (cellData) => <Row cellData={cellData} />, // Renders each cell in the column
htmlEncodeHeaderText: false,
htmlEncode: false,
autoHeight: true,
selectionMode: {
cell: false,
},
},
]
}
const [gridData, setGridData] = useState();
const [grid, setGrid] = useState();
const gridRef = useCallback((node) =>setGrid(node));
useEffect(() => {
grid?.instance.onExpand(() =>{
// Make an async call
Api.fetchGridData().then(setGridData);
}
},
return (
<BryntumGrid
ref={gridRef}
collapsed
collapsible="right"
data={gridData}
project={project}
{...gridConfig}
/>
)
The issue is that autoHeight
does not work properly on async loaded data, and the rows are fixed at the default height.
However, when you expand and then collapse the grid, then autoHeight
is correctly applied.
I suspect that autoHeight
is applied to the rows when the grid is expanded, which is before the Cells are shown on the grid.