[REACT] Style task color based on the parent nodes

[ext_mkucanda]

Hi,

I am trying to make tasks to have the same color as their parent (unless other color is provided). I am referring to your example where you implemented this: https://bryntum.com/products/gantt/examples/custom-rendering/

You extended TaskModel class and added this getter:

get eventColor() {
        if (!this.get('eventColor')) {
            return this.parent.eventColor;
        }
        return super.eventColor;
    }

However in my TypeScript application I get the following error: 'eventColor' is defined as a property in class 'TaskModel', but is overridden here in 'CDSTaskModel' as an accessor.

I am not able to do it because eventColor is defined as a property. So I get around it by doing this:

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-ignore
	get eventColor(): string | null {
		if (!this.get('eventColor')) {
			return (this.parent as any).eventColor;
		}
		return this.get('eventColor'); // I also needed to modify this part a little bit for it to work
	}

Now it works as expected I would like to double-check if there is a better way without using @ts-ignore since it is never recommended?

[ghulam.ghous]

Hi there,

If you do not want to use //@ts-ignore, you can change the logic a bit here. You can use another name for the getter and rewrite taskRenderer. Something like this will help:

get eventColors(): string | null {
		if (!this.get('eventColor')) {
			return (this.parent as any).eventColor;
		}
		return this.get('eventColor'); // I also needed to modify this part a little bit for it to work
	}
}

// task renderer
    taskRenderer({taskRecord}){
        taskRecord.eventColor = (taskRecord as Task).eventColors
    }

Hope it helps!

Regards,
Ghous

[ext_mkucanda]

Hi,

I tried with the taskRenderer approach, but in my case it is not called. I decided to stick with //@ts-ignore solution since it is working for me.

Thank you anyway,

Regards

[mats]

Did you put taskRenderer on the Gantt config?

[ext_mkucanda]

Thank you for clarifying where to put taskRenderer. Yes! It is working now, but in a slightly different way.

When I was using // @ts-ignore with a solution of overriding eventColor, gantt bars were displayed in the same color as their parents. But the underlining data in the eventColor column was not updated. I liked that approach better. But unfortunately when I further tested it I realised that only changing the color in the color column of the grid works fine. Changing color from task editor dialog or using right click => 'select color' stopped working for some reason. Color stays the same in those 2 cases so I can not go with // @ts-ignore approach.

The approach that you suggested using taskRenderer is good, but UX is not that good any more. Imagine that client creates 7 tasks:
task 1
-- task 2
----task 3
----task 4
----task 5
--task 6
----task 7
----task 8
----task 9

If user sets task 1 (parent task of task 2 and task 6) to be red, all of the tasks will be red + all color column cells will have 'red' value. Because they had null value before.

From now on it is not possible to set any value back to null because it always takes the parent value, unless you set all parents to null first. Also if user wants to set task 2 and its children to some other color it can be done by doing it task by task.

Those are the reasons why I preferred the first solution using // @ts-ignore where bars are only shown in the parent color (but underlying data is not automatically set to that color). I don't know why with @ts-ignore approach changing color is not working via menu. That is the only reason why I can not use it :/

[ext_mkucanda]

Hey guys, I managed to make it work using @ts-ignore. I was missing a setter:

        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-ignore
	get eventColor(): string | null {
		if (!this.get('eventColor')) {
			return (this.parent as any).eventColor;
		}
		return this.get('eventColor');
	}

set eventColor(value: string | null) {
	this.set('eventColor', value);
}

This is what I need to add in total to make it work Thank you for your help and suggesting the alternative approach!

[marcio]

Hey ext_mkucanda,

Thanks for sharing the solution in the forums and glad that is all working now!

Don't hesitate to contact us if you need any assistance!