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.
- Screenshot 2023-10-25 at 4.53.12 PM.png (18.8 KiB) Viewed 988 times
However, when you expand and then collapse the grid, then autoHeight is correctly applied.
- Screenshot 2023-10-25 at 4.54.10 PM.png (26.33 KiB) Viewed 988 times
I suspect that autoHeight is applied to the rows when the grid is expanded, which is before the Cells are shown on the grid.
