1. Home
  2. Forum
  3. Angular - EJ 2
  4. Gantt chart customization

Gantt chart customization

Can you please help us in customizing the Angular Gantt Chart to render a view as in the below screen shot.  With timeline settings can configure the topTier, bottomTier of the grid headers.  Is it possible to control each cell rendering in week and month view represntation.   Appreciating your help in advance. 


5 Replies
GA Gurunathan A Syncfusion Team August 13, 2019 01:47 PM UTC

Hi Ram, 
 
We can define the Gantt timeline mode by using the property timelineViewMode and by using unit property of timelineSettings.topTier and timelineSettings.bottomTier we can specify the mode in both top tier and bottom tier separately, please refer the below documentation link. 
 
We have indicators support, using this we can render custom elements, icons on particular date of task. We can assign indicators for each tasks in data source and map this field by using taskFields.indicators property. Please find the below code example. 
 
[index.Html] 
        <style> 
                        .e-round { 
                                    display: block; 
                                    height: 20px; 
                                    width: 20px; 
                                    margin-top: 6px; 
                                    border-radius: 10px 
                        } 
 
                        .e-indicator-span { 
                                    color: transparent; 
                        } 
 
                        .e-low { 
                                    background: red 
                        } 
 
                        .e-partial { 
                                    background: orange 
                        } 
 
                        .e-full { 
                                    background: green 
                        } 
            </style> 
[app.component.ts] 
public ngOnInit(): void { 
            this.data = [ 
                { 
                    //... 
                    Indicators: [ 
                        { 
            'date': '03/27/2019', 
            'iconClass': 'e-round e-low', 
            'tooltip': 'Tooltip text', 
            'name': 'Tooltip text' 
                        }, 
                    ] 
                }, 
            ]; 
            this.taskSettings = { 
                //... 
                indicators: 'Indicators' 
            }; 
            this.timelineSettings = { 
                topTier: { 
                    format: 'MMM, yyyy', 
                    unit: 'Month', 
                }, 
                bottomTier: { 
                    unit: 'Week', 
                    format: 'dd MMM' 
                }, 
                timelineUnitSize: 150 
            }, 
        } 
} 
 
We have prepared a sample as per requirement, please find the below sample link. We can define tooltip for this indicator elements but currently we are facing an issue with this support. 
In this sample we have cleared the tooltip issue in workaround, please find the sample link below. 
 
We have logged issue report for this, this will be fixed and included in our Volume 2, 2019 Service pack 1 release, it will available end of August 2019. 
You can track the status of this issue by using following feedback link. 
 
Regards, 
Gurunathan  
 
 


RA Ram replied to Gurunathan A August 16, 2019 05:56 AM UTC

Hi Ram, 
 
We can define the Gantt timeline mode by using the property timelineViewMode and by using unit property of timelineSettings.topTier and timelineSettings.bottomTier we can specify the mode in both top tier and bottom tier separately, please refer the below documentation link. 
 
We have indicators support, using this we can render custom elements, icons on particular date of task. We can assign indicators for each tasks in data source and map this field by using taskFields.indicators property. Please find the below code example. 
 
[index.Html] 
        <style> 
                        .e-round { 
                                    display: block; 
                                    height: 20px; 
                                    width: 20px; 
                                    margin-top: 6px; 
                                    border-radius: 10px 
                        } 
 
                        .e-indicator-span { 
                                    color: transparent; 
                        } 
 
                        .e-low { 
                                    background: red 
                        } 
 
                        .e-partial { 
                                    background: orange 
                        } 
 
                        .e-full { 
                                    background: green 
                        } 
            </style> 
[app.component.ts] 
public ngOnInit(): void { 
            this.data = [ 
                { 
                    //... 
                    Indicators: [ 
                        { 
            'date': '03/27/2019', 
            'iconClass': 'e-round e-low', 
            'tooltip': 'Tooltip text', 
            'name': 'Tooltip text' 
                        }, 
                    ] 
                }, 
            ]; 
            this.taskSettings = { 
                //... 
                indicators: 'Indicators' 
            }; 
            this.timelineSettings = { 
                topTier: { 
                    format: 'MMM, yyyy', 
                    unit: 'Month', 
                }, 
                bottomTier: { 
                    unit: 'Week', 
                    format: 'dd MMM' 
                }, 
                timelineUnitSize: 150 
            }, 
        } 
} 
 
We have prepared a sample as per requirement, please find the below sample link. We can define tooltip for this indicator elements but currently we are facing an issue with this support. 
In this sample we have cleared the tooltip issue in workaround, please find the sample link below. 
 
We have logged issue report for this, this will be fixed and included in our Volume 2, 2019 Service pack 1 release, it will available end of August 2019. 
You can track the status of this issue by using following feedback link. 
 
Regards, 
Gurunathan  
 
 


Thank you for the response and sample code.  Its really helpful.
Is it possbile to define ng-template for Indicators, in order to customize the UI template.

GA Gurunathan A Syncfusion Team August 20, 2019 12:37 PM UTC

Hi Ram, 
At present we can customize the indicators with native HTML tags with respect to data available in task. But We can't use ng-template here. Please share the more information about what are the customization you will do on this element? It will helpful to provide proper solution for this. 
 
 
Regards, 
Gurunathan  


RA Ram August 21, 2019 03:43 AM UTC

Thanks for your response, sharing a screenshot on the requirement we are trying to address.
1. Making the each indicator cell content as editable in-line and get change notification.
2. Having data value and color indicator for the cell.  Cell should hold vlaue 100% and background color as green. 

if you provide some options without ng-template it would be great.

Appreciating your help



GA Gurunathan A Syncfusion Team August 23, 2019 10:42 AM UTC

Hi Ram, 
 
Query 1: Making the each indicator cell content as editable in-line and get change notification. 
Solution: There is no in-built support to make each indicator cell as editable. We have achieved this by some work around by manually binding the double click and change event using JavaScript addEventListener method in dataBound event. After updating the value of the indicator, we can refresh the row by using refreshRow method. Please find the below code example. 
 
[app.component.html] 
<ejs-gantt id="ganttDefault" height="430px" (dataBound) = "dataBound($event)" > 
                    //... 
</ejs-gantt> 
 
[app.component.ts] 
export class AppComponent { 
  //...   
  public dataBound(args: any): void { 
    var ganttObj = (document.getElementById('ganttDefault') as any).ej2_instances[0]; 
      document.getElementById('ganttDefault').addEventListener('dblclick', function (e) { 
           //... 
          document.getElementsByClassName('e-custom-input')[0].addEventListener('change', function (e: KeyboardEvent) { 
            //... 
         ganttObj.chartRowsModule.refreshRow(rowIndex); 
           }) 
        } 
      }) 
    } 
  } 
 
Query 2: Having data value and color indicator for the cell.  Cell should hold value 100% and background color as green. 
Solution: By using queryTaskbarInfo event, we can render each indicators with different colors based on the value. Please find the below code example. 
 
[app.component.html] 
<ejs-gantt id="ganttDefault" height="430px" (queryTaskbarInfo) = "queryTaskbarInfo($event)" > 
                    //... 
</ejs-gantt> 
 
[app.component.ts] 
export class AppComponent { 
  //...   
  public queryTaskbarInfo(args: any): void { 
      //... 
      if (indicatorValue <= 30) { 
        indicator[i].children[0].className = 'e-rectangle e-low'; 
      } else if (indicatorValue > 30 && indicatorValue <= 80) { 
        indicator[i].children[0].className = 'e-rectangle e-partial'; 
      } else { 
        indicator[i].children[0].className = 'e-rectangle e-full'; 
      } 
      //... 
    }  } 
 
We have prepared sample based on your requirement, please find the below link below. 
 
Please let us know, if you require further assistance on this. 
 
Regards, 
Gurunathan 


Loader.
Up arrow icon