How to hide timeline if start/end dates are not defined?

[Aaron]

Hi! I'm wondering how I can hide timelines for items where I didn't define start/end dates? In my case it is almost always parent items. I want to show timeline only for children at the very end of my tree.

I have the following data structure sample where I on purpose didn't define any dates for parent or high level tasks. I need to define and show dates only for children tasks where I implicitly defined dates. How is it possible to implement?

export const testData: GanttItem[] = [

{

id: 1,

name: 'Project Initiation',

children: [

{

id: 2,

name: 'First stage',

children: [

{

id: 3,

name: 'Frontend Development',

children: [

{

id: 4,

name: 'Identify Site location',

startDate: new Date('04/10/2023'),

endDate: new Date('04/14/2023')

},

{

id: 5,

name: 'Create Design',

startDate: new Date('04/10/2023'),

endDate: new Date('04/14/2023')

}

]

}

]

}

]

},

{

id: 6,

name: 'Discussing results with client'

}

];

And this is how I want it to be displayed

[Udhayakumar Anand]

Hi Aaron

Thank you for reaching out to us with your query regarding hiding timelines for items without defined start/end dates. We have reviewed your request and you can achieve your requirement by using the queryTaskbarInfo event.

Inside this event, you can check the data for start and end dates. If the data does not contain a start and end date, you can set the particular taskbar element visibility to hidden. This will effectively hide the taskbar that does not have start and end dates mapped. You can find the code snippet and sample link below

Code Snippet

/*app.component.ts*/

queryTaskbarInfo(args): void {

    if (!args.data.taskData.StartDate && !args.data.taskData.EndDate) {

      args.taskbarElement.style.visibility = 'hidden';

    }

  }

 

Sample Link: https://stackblitz.com/edit/angular-yvv5ix?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fdata.ts

UG LINK : https://ej2.syncfusion.com/angular/documentation/gantt/appearance-customization#conditional-formatting

We hope this information helps you achieve your desired outcome. Please feel free to reach out to us if you require further assistance.

Regards,

Udhayakumar

[Aaron]

Thanks it helped!

And how I can display on the taskbar with dates actually formatted start and end dates? Like this:


I tried #taskbarTemplate with Angular DatePipe but it didn't work for me. I got empty rows instead of any taskbar

  <ng-template #taskbarTemplate let-data>

    <span>{{ data.startDate | date:'dd.MM.yy' }} - {{ data.endDate | date:'dd.MM.yy' }} </span>

  </ng-template>

[Udhayakumar Anand]

Hi Aaron

We have reviewed your query and We would like to suggest an alternative solution that may better suit your needs. Instead of using the #taskbarTemplate, we recommend using the taskLabel template. This template allows you to display the start and end dates of the task using a customized format.

We have attached a sample that demonstrates how to render a taskLabel using a template to display the start and end dates of the task as per your requirements. You can find the code snippet and sample link below

Code Snippet:

/*app.component.html*/

<ng-template #labelSettingsTaskLabel let-data>

      {{ data.StartDate | date: 'dd.MM.yy' }} -

      {{ data.EndDate | date: 'dd.MM.yy' }}

    </ng-template>

Sample Link : https://stackblitz.com/edit/angular-yvv5ix-jeg8wh?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fdata.ts

We hope this solution has answered your query, please let us know if you have any questions regarding this issue

Regards,

Udhayakumar

[Aaron]

Thanks I tried this option but unfortunately it doesn't work for me. Maybe I missed some import in component or module (I import GantAllModule)? Seems like to local ng-template let-data variable doesn't come any data - I have empty taskbar labels after applying #labelSettingsTaskLabel template

<ejs-gantt *ngIf="dataSource"

[columns] = "columns"

height="100%"

allowUnscheduledTasks

[rowHeight]="33"

[taskbarHeight]="24"

[allowSelection]="false"

[dataSource]="dataSource"

[taskFields]="taskSettings"

[enableVirtualization]="true"

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

<ng-template #labelSettingsTaskLabel let-data>

{{ data.startDate | date: 'dd.MM.yy' }} -

{{ data.endDate | date: 'dd.MM.yy' }}

ng-template>

ejs-gantt>

but at the same time tooltip template which is almost the same works without any problem

    <ng-template #tooltipSettingsTaskbar let-data>

      <ul class="tooltip-info">

        <li>

          <strong>Start Date:</strong> {{ data.startDate | date:'dd.MM.yy' }}

        </li>

        <li>

          <strong>End Date:</strong> {{ data.endDate | date:'dd.MM.yy' }}

        </li>

      </ul>

    </ng-template>

[Udhayakumar Anand]

Hi Aaron

After reviewing your query, we have attached a sample where we have used all the properties that you have used, but we were unable to replicate the issue. However, we understand that you are still facing the issue, and we would be happy to help you further.

Could you please share the following information to validate further?

1. Data source that you’re using to render gantt
2. View type that you’re using
3. Could you please replicate the issue in the stack blitz sample provided, which will be helpful for us to validate further
4. Are you using labelSettings, IF yes could you please share the code snippet of it
5. Version that you’re using

Sample Link : https://stackblitz.com/edit/angular-yvv5ix-ewslmm?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fdata.ts

Regards,

Udhayakumar

[Aaron]

Hi I reproduced my code in stack blitz and there everything works fine
https://stackblitz.com/edit/angular-yvv5ix-kajwa2?file=src/app.component.html

Could it be the problem with the version? Currently I'm using the following syncfusion packages

        "@syncfusion/ej2-angular-gantt": "^19.4.56",

        "@syncfusion/ej2-angular-navigations": "19.4.56",

        "@syncfusion/ej2-angular-richtexteditor": "19.4.56",

        "@syncfusion/ej2-base": "19.4.52",

Also I remembered that I faced with the same issue earlier and syncfusion team told me that was a bug:
https://github.com/syncfusion/ej2-angular-ui-components/issues/223

I would appreciate any help with this issue

[Aaron]

Hi I reproduced my code in stack blitz and there everything works fine
https://stackblitz.com/edit/angular-yvv5ix-kajwa2?file=src/app.component.html

Could it be the problem with the version? Currently I'm using the following syncfusion packages

"@syncfusion/ej2-angular-gantt": "^19.4.56",

"@syncfusion/ej2-angular-navigations": "19.4.56",

"@syncfusion/ej2-angular-richtexteditor": "19.4.56",

"@syncfusion/ej2-base": "19.4.52",

Also I remembered that I faced with the same issue earlier and syncfusion team told me that was a bug:
https://github.com/syncfusion/ej2-angular-ui-components/issues/223

I would appreciate any help with this issue  

[Udhayakumar Anand]

Aaron

We have examined your request, but we are unable to execute the sample with the version you have provided. Would you kindly provide the information listed below so that we may further validate it?

1. Any other customization that you’re using to render gantt
2. Angular version that you’re using
3. List of other packages that you’re using in package.json file
4. Could you please modify the given sample with all the packages that you use and replicate the issue, which will be helpful for us to validate further
5. Could you please provide us the mockup project with all the customization that you’re using

Sample Link  : https://stackblitz.com/edit/angular-yvv5ix-cl3ddi?file=package.json,src%2Fapp%2Fapp.module.ts

Regards,

Udhayakumar