Our state of the art Gantt chart


Post by chenghuang »

This attachment is my modified code。

Attachments
advanced.zip
(2.76 MiB) Downloaded 16 times

Post by marcio »

Hi,

Using the following snippet worked correctly.

<BryntumGantt
            columns={columns}
            {...ganttConfig}
            listeners={
                {
                    renderRows: ({source}) => {
                        source.startDate = new Date('2021-02-03')
                    }
                }
            }
        />
Attachments
Screenshot 2023-05-31 at 08.28.41.png
Screenshot 2023-05-31 at 08.28.41.png (238.79 KiB) Viewed 387 times

Best regards,
Márcio


Post by chenghuang »

Hi,
Your code isn't working properly from the picture you gave.


Post by marcio »

Hey,

The date - 2021-02-03 - is the Wednesday of the first week that is displayed on the Gantt.

What's the expected output from your side?

Best regards,
Márcio


Post by chenghuang »

Hi,
What I expect is that the project's start time shows the see we just customized, which is location marked in the picture in my attachment.

Attachments
gantt_project_start.png
gantt_project_start.png (51.92 KiB) Viewed 374 times

Post by alex.l »

Hi, I checked your app. You forgot to connect ProjectModel you defined to Gantt. So startDate has been successfully updated, but you can't see that on UI because you didn't use it.

Here is updated code that is working for me in both ways - initial set of startDate after init, and further updating using the datefield on the toolbar. Please make sure you see difference via gantt.startDate and gantt.project.startDate

const App = props => {
    const project = useRef();

return <>
    <BryntumProjectModel
        tasks = {tasks}
        ref = {project}
        assignments = {assignments}
        dependencies = {dependencies}
        resources = {resources}
        listeners={{
            dataready: {
                fn: ({source}) => {
                    source.startDate = new Date('2021-02-03') // Change to the desired date here
                },
                once : true
            }

        }}
    />
    <BryntumGantt
        columns={columns}
        {...ganttConfig}
        project={project}
    />
</>
};

https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#config-startDate
https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#field-startDate

All the best,
Alex


Post by chenghuang »

Yes, I successfully achieved what I wanted according to your code, but I didn't find the relevant configuration in your code from the document link you gave. I often couldn't find the appropriate configuration options in your documents. This is also one of the reasons why I can't achieve what I want.


Post by alex.l »

I didn't find the relevant configuration in your code from the document link you gave

Could you please share with us what information we can add to docs for those 2 configs to make it clear? Maybe some example, what did we miss in text?

All the best,
Alex


Post by chenghuang »

I did not find the configuration of dataready in the document link you gave. What I want is to list all the subitems of each configuration item.


Post by alex.l »

Here is docs for dataready https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#event-dataReady
Here is docs for event listeners configs https://bryntum.com/products/gantt/docs/api/Core/mixin/Events#function-on
https://bryntum.com/products/gantt/docs/api/Core/mixin/Events#typedef-BryntumListenerConfig
I hope these are that you missed in the solution we used.

Set project's startDate in dataready listener is not a common thing. Since it might be set initially in that case, or in any other callback method using same property gantt.project.startDate which is documented. I am afraid we cannot add this code snippet to any of configs/props described above.

All the best,
Alex


Post Reply