[REACT] autoHeight does not work properly on async loaded data

[ExtAnimal]

Forum post

It's because of

renderer: (cellData) => <Row cellData={cellData} />, // Renders each cell in the column

A blob of framework stuff does not place real DOM content right into the grid cell, so it cannot be measured to ascertain row height.

I'm not sure how or when DOM gets into the cell from the framework blob. But measuring would have to take place when that happens.

@jsakalos would be the one to tackle this.

[jamesonhill]

Does autoHeight work at all on the BryntumGantt react wrapper component? The following code always has a fixed row height of 46px regardless of column width. The text does wrap to multi-line, but it doesn't cause the row height to increase.

import { useState } from 'react';
import '@bryntum/gantt/gantt.stockholm.css';
import { BryntumGantt } from '@bryntum/gantt-react';

function App() {
  const [config] = useState(() => ({
    columns: [
      {
        type: 'name',
        field: 'name',
        autoHeight: true,
        width: 100,
      }
    ]
  }))

  return (
      <div>
        <BryntumGantt {...config} project={{ tasks: [{ id: '1', name: 'Hello here is a really long name that I want to wrap text with less width'.repeat(10), startDate: new Date(), endDate: new Date()}] }} />
      </div>
  );
}

export default App;

[jamesonhill]

I believe the issue is with the fixedRowHeight prop. If you set that to false, autoHeight sorta works as expected.

<BryntumGantt fixedRowHeight={false} />

[jamesonhill]

Setting it doesn't entirely fix it though. The row height is initially correct but then it resizes back down. When the grid re-renders again the height adjusts to be correct again. See the example below.

https://github.com/bryntum/support/assets/25965865/f2a01013-2e3d-480e-a7b0-909bca3df2c7

[jamesonhill]

@jsakalos Do you know if there is any function on the ref that could be called to force row re-measure?

[chuckn0rris]

Hi, because autoHeight is managed by CSS, I believe row re-rendering will reset the state. But I am not sure it will pick up correct value for the height because of the initial problem what this ticket is about. Try this https://bryntum.com/products/gantt/docs/api/Grid/view/GridBase#function-renderRows

[jamesonhill]

Returning DOMConfig from column renderer is the only reliable way to get this to work from what I've tried.