Our state of the art Gantt chart


Post by omkar ankam »

I want to change the color of Gantt based on the critical path button how can I implement the button to onToggle on any method so that based on my status condition the Gantt color will change.

Thanks


Post by mats »

I want to change the color of Gantt based on the critical path button

Which color do you want to change precisely? Do you have a screenshot?


Post by omkar ankam »

when I click the critical path button I need to change the color of Gantt based on status such as
Completed tasks: #EF4347
In Progress or not yet started tasks: #F29696

Attachments
gantt.PNG
gantt.PNG (39.7 KiB) Viewed 440 times

Post by tasnim »

Hi,

You could use these css to style the tasks

/* style for child task */
.b-ganttbase.b-gantt-critical-paths .b-gantt-task.b-critical {
    background-color: #d25d3c;
}

/* style for parent task */
.b-ganttbase.b-gantt-critical-paths .b-gantt-task-parent .b-gantt-task.b-critical {
    background-color: #cd4866;
}

Post by omkar ankam »

I want to disable Gantt config on a critical path by using the OnClick event

gantt.PNG
gantt.PNG (8.96 KiB) Viewed 420 times

Post by tasnim »

Hi,

You could use this code for example

    tbar : [
        {
            type        : 'button',
            color       : 'b-red',
            icon        : 'b-fa-square',
            pressedIcon : 'b-fa-check-square',
            ref         : 'criticalPathsButton',
            text        : 'Highlight Critical Paths',
            toggleable  : true,
            pressed     : true,
            onToggle({ pressed }) {
                // toggle critical paths feature disabled/enabled state
                gantt.features.criticalPaths.disabled = !pressed;
            }
        }
    ]

I've got this code from our online demo here https://bryntum.com/products/gantt/examples/criticalpaths/

And you should not use ganttConfig in frameworks to disable features or anything, cause it's not the Gantt instance.

Hope this will help.

Let us know if you have any other questions.


Post by omkar ankam »

How can I initialize the instance to a variable in React TypeScript? I tried the above code but I am getting this error.

gantt.PNG
gantt.PNG (11.65 KiB) Viewed 390 times

Post by tasnim »

Here is how you could use it for typescript

            onToggle({ pressed, source } : any) {
                const gantt = source.parent.parent;
                gantt.features.criticalPaths.disabled = !pressed;
            }

Post by omkar ankam »

I am getting this issue in function how to solve

gantt.PNG
gantt.PNG (16.42 KiB) Viewed 358 times

Post by alex.l »

Hi omkar ankam,

Please attach a runnable test case here, we will debug it and find the problem.

All the best,
Alex


Post Reply