search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Adding custom CSS to task in Gantt

Asked by Anonymous
1 month ago.

I know how to set a custom CSS class for a task’s row element like this:

But I can’t seem to set a custom CSS class for the graphic part of the task (say to set its background color).

has anyone encountered this? I get the data from a web service and it returns as a Json that I enter into my gantt chart so I added a cssClass field to the data but when I tried using it I could only change the styling of parent tasks (colored in blue) and not their children tasks.

Answer posted by Dan Letecky [DayPilot]
1 month ago.

It is necessary to style the task children independently.

It is not possible to style task children by applying a CSS class to their parent. In the resulting DOM structure, the task children are not children of the task group.

Comment posted by Anonymous
1 month ago.

Then does that mean I can’t preemptively style the task children? because their innate classes and structure are rendered automatically and without my control. I don’t want to resort to changes to the API JS files..

Comment posted by Dan Letecky [DayPilot]
1 month ago.

You can style the children. But you have to do it when the onBeforeTaskRender event handler is called for that child.

Comment posted by Anonymous
1 month ago.

How do I style the children in the onBeforeTaskRender function though?
This for example is a CSS class I created:

.Bold {
    font-weight: bold;
    background-color: chartreuse !important;
}

And this is the code in my onBeforeTaskRender:

dp.onBeforeTaskRender = function (args) {
                console.log(args);
                console.log(args.data.CssClass);
                const date = new Date(args.data.start);
                args.data.box = { bubbleHtml: args.data.box };
                args.data.row = { bubbleHtml: args.data.row };
                args.data.cssClass = args.data.CssClass;
            };

Adding the row and task bubbles like this works and the field cssClass is populated with Bold but it doesn’t actually affect the styling of the task. Only when I use dev tools and manually add the Bold class does it change the background color of the task.

Comment posted by Anonymous
1 month ago.

I am asking because At the end of the day, the actual HTML element doesn’t exist yet when I call onBeforeTaskRender so I can’t change its CSS and can’t even find it

Comment posted by Dan Letecky [DayPilot]
1 month ago.

You need to use a CSS selector to target the child. If you add a custom “Bold” CSS class to the task box it will result in the following DOM structure:

<div class="gantt_default_event Bold">
  <div class="gantt_default_event_inner">text</div>
</div>

You custom CSS class will be applied at the top level (in addition to gantt_default_event).

To target the child element with the task text, you can use the following selector:

.gantt_default_event.Bold .gantt_default_event_inner {
    font-weight: bold;
    background: chartreuse;
}
Comment posted by Anonymous
1 month ago.

How can I add my custom CSS class to the parent element though? I can access the dp tasks’ cssClass within the onBeforeTaskRender function but the element isn’t rendered yet though. I appreciate the quick answers and the willingness to help but I feel like either I am not understanding your suggestions or you aren’t fully understanding my issue and what I’ve done to try and fix it because I’ve also emailed with you regarding this topic and I still haven’t managed to fix it.

Comment posted by Dan Letecky [DayPilot]
1 month ago.

You can apply the CSS class (to the task box displayed in the grid on the right side) using args.data.box.cssClass:

dp.onBeforeTaskRender = function (args) {
  args.data.box = { bubbleHtml: args.data.box, cssClass: args.data.CssClass };
  args.data.row = { bubbleHtml: args.data.row };
};

The fact that the task box isn’t rendered yet when onBeforeTaskRender is called is not important. The value is saved for later and used during rendering. The onBeforeTaskRender is called when the task is loaded. But the actual rendering can happen several times (as you scroll the task into the viewport and out).

If this isn’t what you are looking for, can you try posting a screenshot and highlighting your requirement there?

Just a note: Overwriting the args.data.box and args.data.row like this is a bit dangerous. These properties are supposed to hold an object with a fixed structure. What you are doing (storing a string there and building the correct structure in onBeforeTaskRender) will work but it may cause confusion when you (or someone else) will work with the code months later.

Comment posted by Anonymous
1 month ago.

Your suggestion Worked. Thank you very much!

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.