Change color of ResourceName

[Martin Sickel]

Dear All

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

Best regards, thanks

Martin

[Suriyaprasanth Ravikumar]

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, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ResourceName1891933288 

 

Thanks, 

Suriyaprasanth R. 

[Martin Sickel]

Amazing,

Thank you.

[Jayakumar Duraisamy]

Hi Martin, 

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

Regards, 

Jayakumar D