Add Subheader to Gantt chart 'text' section

[Andrew Tarr]

Hello, 

I am trying to add subheaders like 

between current data section. 

In addition i would like to customize the date that is displayed in the columns. 

Do you have any examples or How-To's for that?

Thanks!

[Pooja Priya Krishna Moorthy]

Hi Andrew, 

Please find the below response. 

S.No	Query	Syncfusion Comments
1	I am trying to add subheaders like between current data section.	Currently, we don’t have support to add headers in  Gantt. We already logged a feature to add footer in Gantt. Please find the below feedback link.  https://www.syncfusion.com/feedback/11826/footer-support-for-parent-task  We will consider it for including header support also. As we have already lined up some major feature, we could not start its implementation immediately. Please cast your vote to make it count. We will prioritize the features for every release based on demands.
2	In addition i would like to customize the date that is displayed in the columns.	We can customize the data displaying in the columns by using column template support. Please find the below code example.  <ejs-gantt //...>      <e-columns>        //...  <ng-template #template let-data>  <e-column field='Details' headerText='Details' width='250'>     <ng-template #template let-data>         <table style="width:100%;height: 50px;" *ngIf="!data.hasChildRecords">         <tr><td>Allocated</td><td>Stories</td>         <td>Points</td></tr>        //...  </ng-template>  </e-column>  </e-columns>  </ejs-gantt>

We have prepared a sample based on your requirement. Please find the sample from below link. 

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

Regards, 

Pooja K. 

[Andrew Tarr]

Thanks for the response. 

Good to hear that the header is a potential future feature. 

I just want to add to that, the header will need to span across the 'data' section on the left, but also the 'task' section on the right...in this case the grey bar you see in the picture is a separator, that should be continuous across both tables. 

I will try the ng-template for the rest.

[Pooja Priya Krishna Moorthy]

  

Hi Andrew, 

Thanks for the update. 

We will provide the header support for both grid and chart area of Gantt. 

We are also waiting to hear from you whether the provided solution was helpful to you. 

Regards, 

Pooja K. 

[Andrew Tarr]

The sample was helpful and will let me work through my current problems.

However, i would prefer a solution that takes advantage of angular and typescript better. Inline template-ing does function, and brings results, but it is very tedious to figure out the exact names that i need to overwrite, and the general development in this fashion just takes longer.   

[Logeswari Gopalakrishnan]

Hi Andrew, 

 

We can customize the data in columns using queryCellInfo event also. We feel that it will much better for you than using ng-template. Please find the below sample link. 

 

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

 

Please revert us if you have any concern on this. 

 

Regards, 

Logeswari G