Adding custom CSS to task in Gantt

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.

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..

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

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.

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

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;
}

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.

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.

Your suggestion Worked. Thank you very much!