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

[jhill@achieveit.com]

@animal Should your codepen workaround example work with column

renderer

? I added

renderer: ({ value }) => <div>{value}</div>

to the column and it wouldn't compile. Is there any workaround for autoHeight with react component renderer? I linked the wrong repo in my last comment. Here is my public repo where I can repro the issue. https://github.com/jamesonhill/-bryntum-issue

[Animal]

There’s no compilation. That’s just not JavaScript. Put quotes round the HTML you wish to place into the cell.

[jhill@achieveit.com]

Yes, I know it's not compiled. I just meant that the code doesn't run in codePen if renderer returns a react component. Maybe it's an issue with CodePen as opposed to Bryntum. Is there any workaround that allows using autoHeight + column renderer returning a react component? Putting quotes around the renderer return value might work for regular html, but not react components.

[jhill@achieveit.com]

It seems like autoHeight doesn't work at all in the bryntum react wrapper component. Even if I remove column renderer, it does not work. The row height is a fixed 46px regardless of cell content. I've seen it working with plain JS example, but not react.

import './App.css';
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,
        // renderer: (args) => {
        //   return <div>{args.value}</div>;
        // },
        sortable: false
      }
    ]
  }))

  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', startDate: new Date(), endDate: new Date()}] }} projectLinesFeature={false} />
      </div>
  );
}

export default App;

[ghulam.ghous]

Hi Jhill,

Thanks for sharing this. We have already opened a ticket to investigate and fix this issue https://github.com/bryntum/support/issues/8246. You can subscribe to the ticket to keep track of updates.

Regards,
Ghous

[jhill@achieveit.com]

Hi,

Is there any method on ref that can be used to force the rows to be re-measured? I've gotten the grid to the point where a slight window resize fixes the autoHeight issue. Whatever gets called when window size changes, I'm hoping I can use that force the rows to resize programatically. This comment has a recorded example: https://github.com/bryntum/support/issues/8246#issuecomment-1908872368

[alex.l]

HI there, replied in the ticket.
Try https://bryntum.com/products/gantt/docs/api/Grid/view/GridBase#function-renderRows

[jhill@achieveit.com]

Thanks. It didn't quite work as I hoped, but instead calling instance.setTimeSpan in useEffect did trigger the rows to re-render with the correct autoHeight.

[marcio]

Hey jhill,

Thanks for sharing the workaround until the ticket doesn't get resolved.

[kc-coder]

For the ticket being worked on, will it address the row height for PDF export? I'm seeing an issue where the row height is 83px when rendered in the browser prior to printing. However, when printed, the row height for that row gets set back to 46px. This also causes the tasks that show in the scheduler to not line up with the row correctly. In the example screenshots, you can see that the exported pdf image cuts off the text and the associated task is moved out of view.