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. Image for the cookie policy date

Right label of taskbar get cropped within timeline

Hello,

I am facing issue with the right label which is cropped when the taskbar is close to end of the gantt timeline.

When the label is long I tried to wrap it, but it looks like this
If I set the text to left label, I get same issue on the left side of the gantt timeline.
Is there a way to detect the right label(or right lable's taskbar) when it comes close to the end of the timeline, so that when detected it should set it to left label?

Thank you,

Nikitha R

3 Replies

KR Karthikeyan Raja Syncfusion Team January 20, 2020 12:49 PM

Hi Nikitha, 
 
We have analyzed your query. In Gantt, left label or right label is cropped when it exceeds start and end of the timeline. This is default behavior of Gantt. By using tooltip we can render right or left label’s content. If you are satisfied with this requirement, we can provide you a work around solution. 
 
Please get back to us, if you need any further assistance on this. 
 
Regards, 
Karthikeyan Raja. 



NI Nikitha January 24, 2020 02:21 AM

Hello,

Using tooltip I can only view the taskbar data when I hover which is not what I need.
Since there is only export feature for the left side of the gantt chart, I had to use another library to get a screenshot of the right side of gantt chart.
I had to expand the gantt chart to its maximum width and height and show the data for the taskbar on the right label so that when I take a screenshot I get that data along with chart.

Is there a workaround for this?

Thank you

Nikitha R



KR Karthikeyan Raja Syncfusion Team January 24, 2020 04:23 PM

Hi Nikitha, 
 
We have achieved your requirement by following work-around, 
  • Gantt have a method called updateProjectDates which is used to update the timeline dynamically by passing start date and end date of timeline.
  • If we extend the timeline to the maximum width then need to find the maximum end date and it is used to update the timeline.
  • By summation of taskbar left, taskbar width and label text container width. It will give the end Point of a row. Similarly, we need to sort out the maximum end point from the available tasks.
  • We have prepared a custom method called “getDateByLeft()” which is give the date by end Point.
We have prepared a sample to find the maximum end point of a task and get the date then update the timeline. Here, you need to iterate the all the rows to find the maximum end point to find the maximum end Date. 
Please find the code snippet below, 
[app.component.html] 
<button ejs-button (click)="changeTimeline()"> Update Timeline </button> 
<ejs-gantt #gantt id="ganttDefault" 
//…… 
</ejs-gantt> 
 
[app.component.ts] 
export class AppComponent { 
  @ViewChild('gantt', {static: true}) 
public ganttObj: GanttComponent; 
public ngOnInit(): void { 
//…… 
} 
changeTimeline(): void { 
  var task = this.ganttObj.getRecordByID(12); 
  var taskbarLeft = task.ganttProperties.left; 
  var taskbarWidth = task.ganttProperties.width; 
  var rowElement = this.ganttObj.getRowByID(task.TaskID); 
  var labelElement = rowElement.querySelector('.e-right-label-container'); 
  var totalLeft = taskbarLeft + taskbarWidth + labelElement.offsetWidth + 25; // 25 is the margin value 
  var newDate: Date = this.getDateByLeft(totalLeft);                
  this.ganttObj.updateProjectDates(this.ganttObj.timelineModule.timelineStartDate, newDate); 
} 
 
Please find the sample from below link, 
Please get back to us, if you need any further assistance on this. 
  
Regards, 
Karthikeyan Raja. 


Loader.
Live Chat Icon For mobile
Up arrow icon