We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Gantt chart customization

Thread ID:

Created:

Updated:

Platform:

Replies:

146641 Aug 12,2019 01:11 PM UTC Aug 23,2019 10:42 AM UTC Angular - EJ 2 5
loading
Tags: Gantt Chart
Ram
Asked On August 12, 2019 01:11 PM UTC

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. 


Gurunathan A [Syncfusion]
Replied On 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  
 
 


Ram
Replied On 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.

Gurunathan A [Syncfusion]
Replied On 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  


Ram
Replied On 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



Gurunathan A [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon