[ANGULAR] [INFO REQ][GANTT] How Can I achieve Row Highlighting?

[djayaram]

I'm working on adding a feature that lets us highlight rows in the grid part of our Gantt chart. Here's how I'm approaching this:

• Add a 'highlightColor' field to the task model.
• Set up a context menu option when someone right-clicks a row. They can pick a color from this menu, and that color gets linked to the task's 'highlightColor'.
• The chosen color is then used to style the row, making it stand out.

I've been trying to get the last part to work with the renderRow listener, but it's been a bit glitchy when I try to change the row's classes. Got any tips for a smoother way to do this?

Here's the onItem config for the menu item

onItem({ item, record }) {
        const highlightColor = item.id === 'none' ? null : item.id;
        record.highlightColor = highlightColor;
        window.gantt.refreshRows();
    }

and here's my renderRow listener

renderRow({record}) {
    // Create a temporary array to hold classes to remove
    let classesToRemove = [];

// record.cls is a DOMTokenList, iterate safely
record.cls.forEach(cls => {
    if (cls && cls.startsWith('color-highlight-')) {
        classesToRemove.push(cls);
    }
});

// Remove each class that meets the condition
classesToRemove.forEach(cls => record.cls.remove(cls));

// Add the new 'color-swatch-' class if highlightColor is not null and is defined
if (record.highlightColor !== null && record.highlightColor !== undefined) {
    record.cls.add(`color-highlight-${record.highlightColor}`);
}
}

I'm sharing a video to show the visual issue I'm encountering and an image to illustrate what I'm aiming for.

[marcio]

Hey djayaram,

Thanks for reaching out.

There is no video attached here, perhaps you forgot to add it?

If you have a defined number of colors, you can set up the classes directly to the cls object, and then just enable/disable them instead of add/remove. In a scenario where the available highlight colors are red, blue, green and yellow, and their respective color-highlight-[color] classes, you can use something like this

// you have `color-highlight-red`, `color-highlight-blue`, `color-highlight-green` and `color-highlight-yellow`
renderRow({record}) {
	// if has a highlightColor set, set the chosen color, if not set, disable the classes
	if(record.highlightColor) {
		record.cls['color-highlight-red'] = record.highlightColor === 'red';
    		record.cls['color-highlight-blue'] = record.highlightColor === 'blue';
    		record.cls['color-highlight-green'] = record.highlightColor === 'green';
    		record.cls['color-highlight-yellow'] = record.highlightColor === 'yellow';
	} else {
		record.cls['color-highlight-red'] = 0;
    		record.cls['color-highlight-blue'] = 0;
    		record.cls['color-highlight-green'] = 0;
    		record.cls['color-highlight-yellow'] = 0;
	}    

}

[djayaram]

Hi Marcio,

Thanks for getting back to me. I cannot seem to upload video attachments to this forum post (gives me a error popup 'http error'). I've forwarded the videos to support@bryntum.com. I attempted the solution you provided, but unfortunately, it didn't resolve the problem. I'm hoping the videos will help clarify the issue.

[djayaram]

Hi Marcio,

We were able to find a solution for this by modifying the setter on the taskModel.

set highlightColor(color) {
        this.set('cls', color ? `color-swatch-${color}` : '');
        this.set('highlightColor', color || null);
 }

I think we can mark this one as resolved.

[marcio]

Hey,

Glad that you figure it out and thanks for sharing the solution here in the forums.

If you need any assistance please don't hesitate to contact us.