[REACT] Customisation of task bar

[prem kumar]

Hi Team,

I am currently using Bryntum 5.6.9 and have customized the task bar to display stripes backgrounds for certain tasks. Here's the relevant code I am using:

taskRenderer: function (arg) {
    const { taskRecord, renderData } = arg;    

    if (taskRecord.Workstatus === "In-Progress" && !taskRecord.isMilestone) {
        if (taskRecord.isParent) {
            if (taskRecord.flag == TASK_FLAGS.TASK && taskRecord.endDate < new Date()) {
                renderData.style = `
                    background-color: #ffff00;
                    background-image: repeating-linear-gradient(-45deg, #000000 0px, #000000 0.5px, transparent 2px, transparent 16px); /* Stripes */
                    border-radius: 4px;
                    height: 12px;
                    border: 1px solid black;
                `;
            } else {
                renderData.style = `background-color:#db8402;border-radius:4px`;
            }
        } 
    }
}

However, I’ve encountered an issue where when I select tasks, everything focuses correctly except for the "In-Progress" tasks. To address this, I added the following CSS:

.b-gantt-task.b-task-selected {
    background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)) !important;
}

With this addition, the focus is correctly applied to the "In-Progress" tasks, but the stripes no longer appear.I have tried several approaches such as using z-index and position: relative, but none of them seem to work. attached the screen recorder to illustrate the issue

Could you kindly suggest any workarounds for

• customise the task bar with stripes

or

• when selecting the tasks stripes should be visible

Either one of these solutions will work for me.

Thanks,
Prem Kumar

[johan.isaksson]

Hi,

CSS does not stack separate background-image settings from different classes, the most specific one wins (your !important selected class).
To solve your issue, I would move the style from taskRenderer to a CSS class and apply that class instead. And then have a variant of it when selected

Pseudo code for your taskRenderer:

taskRenderer({ renderData }) {
  if (your_condition) {
    renderData.cls += 'in-progress'
  }
}

And CSS would be something like this:

.b-gantt-task.in-progress {
  background-image : gradient-goes-here;
  ...
}

.b-gantt-task.b-task-selected.in-progress {
  background-image : altered-gradient-goes-here; /* or stack two gradients here */
}