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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change color of ResourceName

Thread ID:





131971 Aug 6,2017 01:27 PM UTC Aug 9,2017 04:21 AM UTC ASP.NET Web Forms 3
Tags: Gantt
Martin Sickel
Asked On August 6, 2017 01:27 PM UTC

Dear All

I am searching for a way to display the Resource Name in different colors, is this possible?

Best regards, thanks

Suriyaprasanth Ravikumar [Syncfusion]
Replied On August 7, 2017 12:40 PM UTC

Hi Martin 
Please find the response below.  
By using “RightTaskLabelTemplate” and “LeftTaskLabelTemplate” API’s we can customize the label placed left and right to the taskbar in GanttChart. 
Similarly, by using “QueryCellInfo” client side event we can customize the cell elements in TreeGrid. 
We have prepared a sample and added separate field in resource collection to get the color of resource and rendered resource names in given colors. 
Please refer following code snippet,  
<ej:Gantt ID="GanttControlResource" QueryCellInfo="QueryCellInfo" RightTaskLabelTemplate="#righttemplate"> 
<script type="text/javascript"> 
            var helpers = {}; 
            helpers["_getResource"] = window.getResourceValue; 
            // Client side event to customize the TreeGrid cell elements. 
            function QueryCellInfo(cellArgs) { 
                if (cellArgs.column.field == "resourceInfo") { 
                    var args = {}; args.resourceInfo = cellArgs.cellValue; 
            // Helper method to customize the resource name color. 
            function getResourceValue(args) { 
                var htmlText = ""; 
                if (args.resourceInfo && args.resourceInfo.length > 0) { 
                    var resInfo = args.resourceInfo; 
                    htmlText = "<span style=color:" + resInfo[0].Color + ";>" + resInfo[0].Name + "</span>" 
                    for (var index = 1; index < resInfo.length; index++) { 
                        if (index == (resInfo.length - 1)) 
                            htmlText = htmlText + "<span style=color:" + resInfo[index].Color + ";>," + resInfo[index].Name + "</span>"; 
                            htmlText = htmlText + "<span style=color:" + resInfo[index].Color + ";>," + resInfo[index].Name + "</span>"; 
                return htmlText; 
        <script type="text/x-jsrender" id="righttemplate"> 
protected void Page_Load(object sender, EventArgs e) 
            this.GanttControlResource.Resources = this.GetResourceCollection(); 
private List<ResourceObject> GetResourceCollection() 
            List<ResourceObject> resourceCollection = new List<ResourceObject>(); 
            resourceCollection.Add(new ResourceObject() { Id = 1, Name = "Resource1", Color = "green" }); 
            return resourceCollection; 
We have also prepared a sample for your reference, please find the sample location as below, 
Suriyaprasanth R. 

Martin Sickel
Replied On August 8, 2017 07:37 AM UTC


Thank you.

Jayakumar Duraisamy [Syncfusion]
Replied On August 9, 2017 04:21 AM UTC

Hi Martin, 
We are glad that your requirement has been met. Please let us know if you need any other assistance. 
Jayakumar D 


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