New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

How do I change the text color of a row in the TreeList section of a Gantt chart


Product Version 2019.3.1023
Product RadGantt for ASP.NET AJAX


The Treelist part of the Gantt contains rows with the same data-uid attribute as the _uid attribute of the corresponding task. This is the way to access the treelist row for a given task and then based on the Gantt columns, to determine the cell for a given field.

Accessing the cells for a task allows applying custom styles and attributes as well as customizing the HTML rendered for the column.


    function getColumnIndexByColumnField(gantt, field) {
        var cols = gantt.columns();
        for (var i = 0; i < cols.length; i++) {
            var col = cols[i];
            // for title seach, use col.title
            if (col.field == field) {
                return i;
        return -1;

    function OnClientDataBound(sender, args) {
        var tasks = sender.get_allTasks();

        tasks.forEach(function (task, index) {
            var taskuid = tasks[0]._uid;

            var $row = $telerik.$(sender.get_element()).find("tr[data-uid=" + taskuid + "]");
            var $cell = $row.find(">td").eq(getColumnIndexByColumnField(sender, "title"));

            // set styles for the "title" cell
                "color": "white",
                "background-color": "blue"
<telerik:RadGantt RenderMode="Lightweight" ID="RadGantt1" runat="server" AutoGenerateColumns="false" SelectedView="WeekView" EnableResources="true" OnClientDataBound="OnClientDataBound">
        <telerik:GanttBoundColumn DataField="Title" DataType="String"></telerik:GanttBoundColumn>
        <telerik:GanttResourceColumn HeaderText="Assigned Resources"></telerik:GanttResourceColumn>
protected void Page_Load(object sender, EventArgs e)
    RadGantt1.Provider = new XmlGanttProvider(Server.MapPath("~/App_Data/Gantt.xml"), true);
<?xml version="1.0" encoding="utf-8"?>
      <ParentID />
      <Title>New task</Title>
  <Dependencies />
  <Assignments />
      <Text>Thomas Hardy</Text>
      <Text>Elizabeth Lincoln</Text>

See Also

In this article