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. Image for the cookie policy date

Change color of ResourceName

Dear All

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

Best regards, thanks
Martin

3 Replies

SR Suriyaprasanth Ravikumar Syncfusion Team 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,  
[ASPX] 
<ej:Gantt ID="GanttControlResource" QueryCellInfo="QueryCellInfo" RightTaskLabelTemplate="#righttemplate"> 
</ej:Gantt> 
<script type="text/javascript"> 
            var helpers = {}; 
            helpers["_getResource"] = window.getResourceValue; 
 
            $.views.helpers(helpers); 
 
            // Client side event to customize the TreeGrid cell elements. 
            function QueryCellInfo(cellArgs) { 
                if (cellArgs.column.field == "resourceInfo") { 
                    var args = {}; args.resourceInfo = cellArgs.cellValue; 
                    $(cellArgs.cellElement).empty().append($(getResourceValue(args))); 
                } 
            } 
            // 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>"; 
                        else 
                            htmlText = htmlText + "<span style=color:" + resInfo[index].Color + ";>," + resInfo[index].Name + "</span>"; 
                    } 
                } 
                return htmlText; 
            } 
        </script> 
        <script type="text/x-jsrender" id="righttemplate"> 
            {{:~_getResource(#data)}} 
        </script> 
 
 
[.CS] 
 
protected void Page_Load(object sender, EventArgs e) 
        { 
            //.. 
            this.GanttControlResource.Resources = this.GetResourceCollection(); 
            this.GanttControlResource.DataBind(); 
        } 
 
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, 
 
Thanks, 
Suriyaprasanth R. 



MS Martin Sickel August 8, 2017 07:37 AM UTC

Amazing,

Thank you.



JD Jayakumar Duraisamy Syncfusion Team 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. 
Regards, 
Jayakumar D 


Loader.
Live Chat Icon For mobile
Up arrow icon