Our blazing fast Grid component built with pure JavaScript


Post by spodeopieter2 »

Good day,

I am trying to use JSX inside my ganttConfig.js file , but it is not working as I need it to work.
    {
      text: "rollup button",
      renderer: ({ record }) => {
        return <button text={"Edit"} />;
      },
    },
rollupB.PNG
rollupB.PNG (3.57 KiB) Viewed 3226 times
I am not the most experienced developer , so I am sorry if this is a stupid question.

Any ideas as to what I might be doing wrong ?

I made this post in the wrong section , it should be under gantt , sorry for my mistake

Post by saki »

Support for JSX return values from the column renderer is implemented in React wrapper (see please section Using React as cell renderer of the React Integration Guide.

I guess that you use advanced example (because you mention ganttConfig.js) and this example does not use the wrapper. On the other hand, basic demo does use the wrapper so you can add the JSX column renderer to Gantt. For example:
<BryntumGantt
    ref={'gantt'}
    project={project}
    columns={[
        { type : 'name', field : 'name', width : 250 },
        {
            text: "rollup button",
            renderer: ({ record }) => {
                return <button>Edit</button>;
            },
        },
     
I have modified the button a bit in the above code so that it would display so that the "Edit" text is displayed.

Post by saki »

Did you succeed in resolving the problem?

Post by spodeopieter2 »

No I haven't succeeded in solving the problem , to be honest I am reconsidering rewriting what I have at the moment , I wanted my code to be clean , but I'm thinking that perhaps it would be cleaner if I just get rid of react , if that makes sense.

I am paying the price for my lack of understanding of JavaScript basics and object oriented programming in JavaScript.
and I am also paying the price for trying to think in react.

But I am not giving up that easily , I still have something I want to experiment with , and that is to create React components and try and put references to them inside ganttConfig...

The other option is to switch over to using the wrappers , then thinking in react might become an option....

What is the intention that you guys have with the wrappers ?

Is it even possible to use the gantt library to write an enterprise application and think in react at the same time?

Perhaps you can point me in the direction that you think would be best ?

*I suspect you have many more years of experience with programming than I do.

Post by saki »

Yes, rewriting is always an option, I've done it personally many times. However, re-writing a bigger application to plain JavaScript can be very time consuming because you would need to take care of functionalities otherwise handled by React. In other words, React (or other framework) can save a lot of time providing the core functions.

It very good approach to not give up, React is not that difficult to learn as it may seem. Some time ago I learned it on a course, PM me for details if you want. Otherwise, this is the place to start. Video showing its usage and integrating Bryntum Scheduler:

clean-react.gif
clean-react.gif (18.44 MiB) Viewed 2756 times

Wrappers are actually thin layers between Bryntum Scheduler which is written in vanilla JavaScript (without any framework) and React. In other words, wrapper "converts" scheduler to a React component so that it can be used the same way as other React components. More information here.

Yes, React can be used to write an enterprise-grade app. Create React App scripts are very helpful. They allow you to run a development server while writing the app and then to build a production version of the app.

Summary, I probably wouldn't go without a framework but I'd choose some of them. React would be a good choice.

Post by abvardy »

Is it possible for the React wrapper to customise the "name" column? I tried doing with my basic understanding of the wrapper works, i see it render [object Object]. Any help would be much appreciated! Thanks in advace.


Post by saki »

The React JSX renderer is currently not supported for TreeColumn and name column is extension of TreeColumn.

The ticket is here: https://github.com/bryntum/support/issues/1983


Post by abvardy »

saki wrote: Fri Nov 27, 2020 11:21 am

The React JSX renderer is currently not supported for TreeColumn and name column is extension of TreeColumn.

The ticket is here: https://github.com/bryntum/support/issues/1983

Thank you for the support ticket, would love to see it work soon with a version upgrade 🙂


Post by abvardy »

Do we know when this is planned for release rollout? I see it say 4.0.x, any help would be much appreciated.


Post by abhilashlr »

Hello saki, any help here is much appreciated. When can we expect a release on this one?


Post Reply