Support for rendering react components in TaskEdit popup

Our state of the art Gantt chart


User avatar
mats
Core Developer
Core Developer
Posts: 16148
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Support for rendering react components in TaskEdit popup

Post by mats »

Are you using the React wrapper from the latest version (v1.2). If yes, can you please zip up a full test case for us?
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
Qwerty
Premium Member
Premium Member
Posts: 76
Joined: Mon Aug 05, 2019 9:00 am

Re: Support for rendering react components in TaskEdit popup

Post by Qwerty »

I assume by wrapper you mean the

Code: Select all

<BryntumGantt>
component in the examples directory? I switched over to using this and react components were now mounting correctly. Should this class be available from the library /lib code itself?

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2846
Joined: Fri Apr 01, 2016 11:08 am

Re: Support for rendering react components in TaskEdit popup

Post by pmiklashevich »

BryntumGantt is a wrapper provided for example purposes (Gantt/examples/react/_shared). It's not a part of the /lib. You can copy the wrapper to your application, or install it as a local npm package. In our demos we use it as a local npm package. Please see Basic demo (Gantt/examples/react/javascript/basic/src/containers/Main.js):

Code: Select all

import { BryntumGantt } from 'bryntum-react-shared';
....
                <BryntumGantt
                    ref={'gantt'}
                    project={project}
                    columns={[
                    ....
You can read more in our guide: https://www.bryntum.com/docs/gantt/#guides/integration/react.md
Also you can refer to Scheduler guide, maybe it's a bit more clear: https://www.bryntum.com/docs/scheduler/#guides/integration/react.md
Looking forward to hearing your feedback, so we can update our Gantt guide. Thanks!
Pavel Miklashevich - Core Developer

User avatar
Qwerty
Premium Member
Premium Member
Posts: 76
Joined: Mon Aug 05, 2019 9:00 am

Re: Support for rendering react components in TaskEdit popup

Post by Qwerty »

The gantt react integration guide doesn't seem to make any mention of the BryntumGantt wrapper which is required to get react components working in cells. Its not clear to me why this is considered an example and not just part of the library. The class worked perfectly fine as is after I changed the file paths for the imports. It seems to me like everything in this file is low level library code and anything a user would want to change can be passed in as a prop to the component.

Ideally we would just be able to import the BryntumGantt component without having to copy/paste the file as this makes future updates harder. As well as having some way of getting a copy of the ganttEngine variable back so we can access it.

User avatar
sergey.maltsev
Core Developer
Core Developer
Posts: 556
Joined: Mon Dec 24, 2018 9:15 am

Re: Support for rendering react components in TaskEdit popup

Post by sergey.maltsev »

Hi!

BryntumGantt is a pure JS library which can be used with many frameworks.
It is not angualr, react or vue component, but it can be used with any of them.

Currently we have BryntumGantt wrapper as a part of examples only to showcase how Bryntum components can be implemented within various frameworks.
End-user could do more things by himself to extend it's functionality.

User avatar
Qwerty
Premium Member
Premium Member
Posts: 76
Joined: Mon Aug 05, 2019 9:00 am

Re: Support for rendering react components in TaskEdit popup

Post by Qwerty »

Ok I have experimented with the react cell editors a little more and they seem to mostly work other than one issue. React elements are confined to the space of the cell and are unable to overflow it. This makes it pretty hard to implement most editors.

A react select box in bryntum gantt:
Image

It would be very useful if the editor was rendered outside of the cell and then positioned over it so it is able to take as much space as needed like this:

Image

User avatar
Maxim Gorkovsky
Core Developer
Core Developer
Posts: 3091
Joined: Wed Jan 08, 2014 11:46 am

Re: Support for rendering react components in TaskEdit popup

Post by Maxim Gorkovsky »

Hello.
Thank you for report, I opened ticket here: https://github.com/bryntum/support/issues/73

You could try to change cell style allowing it to overflow content. Smth like:

Code: Select all

// ganttConfig.js
columns: [
  { field : 'status', cellCls: 'my-cell-cls' }
]

// App.scss
.my-cell-cls {
  overflow: visible;
}

Post Reply