Not able to find features in ejs-gantt which are available in ej-gantt

[Jignesh]

I'm changing form ej-gantt to ejs-gantt and facing below issues.

Below image is how it appears after change

.

---------------------------------------------------------------------------------------------------

1) How to display superordinate tasks (tasks with children) in bold by default ?

2) How to set TaskId column data left aligned and TaskName with tree structure.

3) How to set column header height equal to chart header height. (ie.  No, Activity --  Week/Day )

4) How to set vertical border of columns ?

5) How to show critical path ?

.

.

[Gopinath Muniraj]

Hi Jignesh, 

Thanks for contacting Syncfusion support. 

Please find the below response. 

S. No	Queries	Syncfusion comments
1.	How to set TaskId column data left aligned and TaskName with tree structure.	We can set the TaskName column as treeColumn by using the property treeColumnIndex. We need to pass the index of the column in the property treeColumnIndex which we need to set as treeColumn.
2.	How to set vertical border of columns?	We can set the vertical borders on the column by using the property gridLines. Please find the below code snippet,  //Renders only horizontal lines  gridLines: ‘Horizontal’  //Renders only vertical lines  gridLines: ‘Vertical’  //Renders both the grid lines  gridLines: ‘Both’
3.	How to show critical path?	Currently we are not having the support for critical path in EJ2. However, we have logged a feature report for this. The status can be tracked through the below feedback link.   Feedback link: https://www.syncfusion.com/feedback/6471/critical-path-support-for-gantt   As we have already lined up some major features, we could not this support immediately. We will implement this and include it in any of our upcoming releases. Please cast your vote on this feature based on the customer demand we will prioritize the features in our upcoming road map.
4.	How to display superordinate tasks (tasks with children) in bold by default?	Yes, we can bold the parent tasks in EJ2 Gantt byu using some workaround. Please find the below code snippet,  <style>      tr[aria-expanded] {          font-weight: bolder;      }  </style>  We have prepared a sample for your reference. Please get the sample from below link.  Sample: https://stackblitz.com/edit/angular-ghefty?file=index.html
5.	How to set column header height equal to chart header height?	We are not able to reproduce the reported issue. Can you please confirm that you are mapping the CSS files properly? Else please share us a issue reproducible sample. It will be helpful for us to resolve the issue asap.

 

Please let us know if you need any further assistance. 

Thanks, 

Gopinath M 

[Anjana Premaratne]

Regarding the bold superordinate tasks:

With the proposed solution, when we collapse and expand again, all child tasks become bold as well. (Because the aria-expand=true is applied for all child tasks. Can replicate in the given ) Any workaround for this?

I have used the below solution.

.parent-row{

        font-weight: bolder; 

    }

rowDataBound(args:any){

    if(args.data.hasChildRecords){

      this.renderer.addClass(args.row, "parent-row");

    }

    else{

      this.renderer.removeClass(args.row, "parent-row");

    }

  }

[Monisha Sivanthilingam]

Hi Anjana, 

 

We were able to replicate the issue you reported. We will validate it and provide you with further details within two business days(September 3, 2021). 

 

We appreciate your patience until then. 

 

Regards, 

Monisha. 

 

[Monisha Sivanthilingam]

Hi Anjana, 

 

Thank you for your patience. 

 

We can achieve your requirement in an alternate way by making use of the queryCellInfo event to display the parent tasks in bold. The following code snippets demonstrate the solution. 

 

App.component.html 

 

<ejs-gantt id="ganttDefault" height="550px" [dataSource]="data"  

      [taskFields]="taskSettings" [allowSelection]="true" 

      [labelSettings]="labelSettings" [projectStartDate]="projectStartDate"  

      [projectEndDate]="projectEndDate" 

      (queryCellInfo)="queryCellInfo($event)" [highlightWeekends]="true"> 

</ejs-gantt> 

 

 

App.component.ts 

 

public queryCellInfo(args: any) { 

if (args.data.hasChildRecords) { 

   args.cell.className += ' e-bold'; 

} 

} 

 

 

Index.html 

 

<style> 

  .e-bold { 

    font-weight: bold; 

  } 

</style> 

 

 

We have prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.