Right label of taskbar get cropped within timeline

[Nikitha]

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

[Karthikeyan Raja]

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. 

[Nikitha]

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

[Karthikeyan Raja]

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, 

Sample - https://stackblitz.com/edit/angular-z7rsmw?file=app.component.ts 

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

  

Regards, 

Karthikeyan Raja. 

[John Doe]

Could you provide a method for doing the same but for the left label? 

[Gopinath Munusamy]

Hi John Doe,

We are currently working on your query and will share further details within two business days on October 4, 2022. Until then we appreciate your patience.

Regards,

Gopinath M

[Gopinath Munusamy]

Hi John Doe,

Thanks for the patience.

We have prepared a sample to achieve your requirement. In this sample, we have modified the same with left label using a custom method getDateByRight() also we must modify the newDate and timelineEndDate value inside the updateProjectDates method. We have attached a sample and code snippets for your reference, please check the below sample and code snippets for more details.

Code snippets:

 

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-left-label-container');

    var totalLeft = taskbarLeft + taskbarWidth + labelElement.offsetWidth + 25; //Element's margin left;

    var newDate: Date = this.getDateByRight(totalLeft);

    this.ganttObj.updateProjectDates(

      newDate,

      this.ganttObj.timelineModule.timelineEndDate

    );

  }

//…

public getDateByRight(right: number): Date {

    let pEndDate: Date = new Date(

      this.ganttObj.timelineModule.timelineEndDate.toString()

    );

    let milliSecondsPerPixel: number =

      (24 * 60 * 60 * 1000) / this.ganttObj.perDayWidth;

    pEndDate.setTime(pEndDate.getTime() - right * milliSecondsPerPixel);

    let tierMode: string =

      this.ganttObj.timelineModule.bottomTier !== 'None'

        ? this.ganttObj.timelineModule.topTier

        : this.ganttObj.timelineModule.bottomTier;

    //...

    }

    return pEndDate;

  }

Sample: https://stackblitz.com/edit/angular-z7rsmw-b9pvb7?file=app.component.ts

Regards,

Gopinath M