Customize taskbar

Nikitha

Asked On December 11, 2019 08:31 AM UTC

Hello,

I have a requirement on showing a part of the taskbar as "colored" or "bottle-necked" ie.,when there is a holiday for the taskbar(activity).

I have defined holidays for the whole project. Additional to that I have another set of holidays for the taskbar.

How do I achieve that using templateTaskbar? Is it possible to render the taskbar in any of the given case below?

Thank you,

Nikitha R

Reply | Reply with quote

Pooja Priya Krishna Moorthy [Syncfusion]

Replied On December 12, 2019 11:37 AM UTC

Hi Nikitha,

In Gantt, we don’t have in-built support to achieve this requirement, but we can highlight ranges with different colors in taskbar by using queryTaskbarInfo event or taskbar template support.

In queryTaskbarInfo event, we can append a div element as a child to the taskbar element. The left and width of this particular div element can be calculated by defining holiday start date and holiday end date in the data source. Please find the below code example.

[app.component.html]

<ejs-gantt # gantt

//...

(queryTaskbarInfo) = "queryTaskbarInfo($event)">

</ejs-gantt>

[app.component.ts]

public queryTaskbarInfo(args: any): void {

var startDate = args.data.taskData.HolidayStart;

var endDate = args.data.taskData.HolidayEnd;

if(!isNullOrUndefined(startDate) && !isNullOrUndefined(endDate)) {

var diff = endDate.getTime() - startDate.getTime();

var width = (diff / (1000 * 60 * 60 * 24)) * this.ganttObj.perDayWidth;

var taskbar = args.taskbarElement.getElementsByClassName("e-gantt-child-taskbar");

if (taskbar.length > 0) {

var left = this.ganttObj.dataOperation.getTaskLeft(args.data.StartDate, args.data.ganttProperties.isMilestone);

var holidayleft = this.ganttObj.dataOperation.getTaskLeft(startDate, args.data.ganttProperties.isMilestone)

var element = document.createElement("div");

element.className = 'e-custom-taskbar';

element.style.width = width + 'px';

element.style.left = (holidayleft - left) + 'px';

taskbar[0].appendChild(element);

}

Sample - https://stackblitz.com/edit/angular-whgrdk-85u6pi?file=app.component.html

Note: In the provided sample, we have changed only the color of the part of taskbar. The dates are not validated based on the holidays assigned for the particular task.

Please let us know, if you need further information on this.

Regards,

Pooja K.

Reply | Reply with quote

Nikitha

Replied On December 27, 2019 12:03 PM UTC

Hello,

Thank you for replying.

Sorry I took time to get back to you.

It worked !!

I modified it as holiday array in the taskdata to show more holidays on the taskbar.

Although I am facing problem when I set time along with the date.

As you can see I have set holiday[0].HfromDate to "9-12-2019 08:00" same as taskbar's startDateTime

{
      "id": 902,
      "code": "CIVI.767",
      "name": "Topographic Survey",
      "startDateTime": "09-12-2019 08:00",
      "endDateTime": "12-12-2019 16:00",
      "holiday":[
        {
            "HfromDate": "09-12-2019 08:00",
            "HtoDate": "10-12-2019 00:00"
        },
        {
            "HfromDate": "11-12-2019 00:00",
            "HtoDate": "12-12-2019 00:00"
        }
      ],
      "isMilestone": 0,
      "percentageComplete": "0",
      "parentId": 140,
      "predecessors": "",
      "totalFloat": "0 hours",
      "totalDuration": "32 hours",
      "type": "activity",
      "freeFloat": "0 hours",
      "lag": "0.0"
      }

But the div starts from date 9th 00:00hours but I want it to show on the date 9th 08:00hours.

In other words, the div should not come outside the taskbar.

Please look into this issue. Looking forward to your reply.

Thank you,

Nikitha R

Reply | Reply with quote

Karthikeyan Raja [Syncfusion]

Replied On January 2, 2020 11:42 AM UTC

Hi Nikitha,

In Gantt, default dayWorkingTime set to 08:00 to 17:00. So that div starts from 08:00 hours. We can change the dayWorkingTime property. Please find the code snippet below,

[app.component.html]

//…

<ejs-gantt id="ganttDefault" [dayWorkingTime] = "dayWorkingTime"></ ejs-gantt >

//…

[app.component.ts]

//…

export class AppComponent {

public dayWorkingTime: object;

public ngOnInit(): void {

this.dayWorkingTime = [ {from: 0, to: 24 } ];

}

//…

We have prepared sample with your requirement. Please find the code snippet below,

Sample – https://stackblitz.com/edit/angular-whgrdk-pdnq6x

Please get back to us, If you need any further assistance on this.

Regards,

Karthikeyan Raja.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
149827	Dec 11,2019 08:31 AM UTC	Jan 2,2020 11:42 AM UTC	Angular - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US