How to set color of milestone and group bar in gantt

Asked by Anonymous
8 years ago.

Hi,

I want to set another color than blue and green for group and milestone. I set task color by using e.Box.BackgroundColor in BeforeTaskRender, but that seems not to have effect on group and milestone elements.

Regards,
Roger

how-to asp.net

Answer posted by Dan Letecky [DayPilot]
8 years ago.

Shapes of these elements are created using CSS so you can't control the color using a simple property in BeforeTaskRender - they can only be modified using CSS. You can use BeforeTaskRender to add a custom class:

e.Box.CssClass = "myclass";

And add a definition based on the class to the CSS. The default styles are as follows:

.gantt_default_task_group .gantt_default_event_inner { position:absolute;top:5px;left:0px;right:0px;bottom:6px;overflow:hidden; background: blue; filter: none; border: 0px none; }
.gantt_default_task_group.gantt_default_event:before { content:''; border-color: transparent transparent transparent blue; border-style: solid; border-width: 6px; position: absolute; bottom: 0px; }
.gantt_default_task_group.gantt_default_event:after { content:''; border-color: transparent blue transparent transparent; border-style: solid; border-width: 6px; position: absolute; bottom: 0px; right: 0px; }

In order to override the appearance, you need to add a more specific selector, something like this. This example uses "red" instead of blue for the group:

.myclass.gantt_default_task_group .gantt_default_event_inner { position:absolute;top:5px;left:0px;right:0px;bottom:6px;overflow:hidden; background: red; filter: none; border: 0px none; }
.myclass.gantt_default_task_group.gantt_default_event:before { content:''; border-color: transparent transparent transparent red; border-style: solid; border-width: 6px; position: absolute; bottom: 0px; }
.myclass.gantt_default_task_group.gantt_default_event:after { content:''; border-color: transparent red transparent transparent; border-style: solid; border-width: 6px; position: absolute; bottom: 0px; right: 0px; }

Something similar applies to milestones which use the following default style:

.gantt_default_task_milestone .gantt_default_event_inner { position:absolute;top:16%;left:16%;right:16%;bottom:16%; background: green; border: 0px none; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg); transform: rotate(45deg); filter: none; }

Red version:

.myclass.gantt_default_task_milestone .gantt_default_event_inner { position:absolute;top:16%;left:16%;right:16%;bottom:16%; background: red; border: 0px none; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg); transform: rotate(45deg); filter: none; }

Answer posted by turtle
8 years ago.

Hi,

I tried the sample code for milestones above but did not work properly.
Instead I managed to resolve this issue as follows:

First, add a custom css class in the <head> section of your page or in a separate css file.

For example,

/*-----------------------------------------*/
.myClass .gantt_default_event_inner
{
position: absolute;
top: 16%;
left: 16%;
right: 16%;
bottom: 16%;
background: red;
border: 0px none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
filter: none;
}

/*-----------------------------------------*/

And then, specify the Box.cssClass in BeforeTaskRender like this:

e.Box.cssClass = "myclass";

It is a tad bit baffling, but please note that it is not Box.CssClass but Box.cssClass when you type this statement.

Comment posted by turtle
8 years ago.

Oops I made a typo.

e.Box.cssClass = "myClass";

Sorry

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

How to set color of milestone and group bar in gantt

Products

Learn

Get Support

DayPilot Pro