We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customize taskbar

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
loading
Tags: Gantt Chart
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

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); 
        } 
    } 
} 
 
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. 
 


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

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, 
Please get back to us, If you need any further assistance on this. 
 
Regards, 
Karthikeyan Raja. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon