Our state of the art Gantt chart


Post by rapiduser »

I am trying to change the color of a milestone with a dynamic color. I am able to do this successfully for regular tasks but when it comes to milestones the styling is applied to the background as seen in the image below where I would like the diamond to be green with no green background;

2021-09-10_15-22-16.png
2021-09-10_15-22-16.png (12.61 KiB) Viewed 282 times

I can change the milestone using a static css rule like so;

.b-milestone-wrap .b-gantt-task.b-milestone.mstone .b-gantt-task-content,
.b-task-rollup.important {
    background-color : #222;
}

However due to the nature of my application the color is not immediately known so I have to apply it in a dynamic manner.

I've attempted to change it through the taskRenderer by modifying the renderData style but the outcome is the same.


Post by rapiduser »

Nvm. I've found a solution


Post by s-tech »

I'm facing the same issue but did not found any solution can you please let me know the solution or guide me to the solution.


Post by alex.l »

You're right, it should be more easy to apply style for milestone, I've opened a ticket to fix that
https://github.com/bryntum/support/issues/5361

For now you can:

  1. add CSS class on data level, using https://bryntum.com/docs/gantt/api/Gantt/model/TaskModel#field-cls field or add cls in https://bryntum.com/docs/gantt/api/Gantt/view/GanttBase#config-taskRenderer
        taskRenderer({ taskRecord, renderData }) {
            if (taskRecord.isMilestone) {
                renderData.cls.add('new-color-1');
            }
        }
    
  2. Add CSS rule for that class
    .new-color-1 .b-gantt-task-content {
        background-color: #f00 !important;
    }
    

All the best,
Alex


Post Reply