How to customize the color of specific group in WPF GanttControl

2 mins read

This article explains how to customize the specific row with various colors in the Syncfusion WPF Gantt control, as shown in the following image.

Output image of the specific row color for gantt grid

This can be achieved by considering each node item and updating that style using the GanttGrid model QueryCellInfo event, as shown in the following steps:

Step 1: Initialize the GanttControl with the necessary properties, such as ItemsSource and Mapping properties.

[XAML]

<gantt:GanttControl x:Name="Gantt"
                    ItemsSource="{Binding TaskDetails}"
                    UseAutoUpdateHierarchy="False"
                    VisualStyle="Metro"
                    Loaded="Gantt_OnLoaded">
    <gantt:GanttControl.TaskAttributeMapping>
        <gantt:TaskAttributeMapping TaskIdMapping="Id"
                                    TaskNameMapping="Name"
                                    StartDateMapping="StDate"
                                    ChildMapping="ChildTask"
                                    FinishDateMapping="EndDate"
                                    DurationMapping="Duration"
                                    ProgressMapping="Complete"
                                    PredecessorMapping="Predecessor"
                                    ResourceInfoMapping="Resource" />
    </gantt:GanttControl.TaskAttributeMapping>
</gantt:GanttControl>

Step 2: Subscribe to the QueryCellInfo of GanttGrid’s Model in the GanttGrid’s Loaded event, because we are only updating the color of each row in it, as shown in the following code sample.

[C#]

private void GanttGrid_Loaded(object sender, RoutedEventArgs e)
{
    this.Gantt.GanttGrid.Model.QueryCellInfo += this.Model_QueryCellInfo;
    this.Gantt.GanttGrid.InternalGrid.PopulateTree();
    this.Gantt.GanttGrid.InternalGrid.ExpandAllNodes();
}
 
private void Model_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)
{
    int nodeindex = this.Gantt.GanttGrid.InternalGrid.ResolveIndexToColumnIndex(e.Style.ColumnIndex);
    if (nodeindex > -1)
    {
        GridTreeNode node = this.Gantt.GanttGrid.InternalGrid.GetNodeAtRowIndex(e.Style.RowIndex);
        if (node != null && node.Item != null)
        {
            Task task = node.Item as Task;
            if (task != null)
            {
                if (task.RowType == RowType.Projectrow)
                {
                    e.Style.Background = new SolidColorBrush(Colors.Red);
                }
                else if (task.RowType == RowType.SubProjectRow)
                {
                    e.Style.Background = new SolidColorBrush(Colors.Yellow);
                }
                else if (task.RowType == RowType.AnalysisRow)
                {
                    e.Style.Background = new SolidColorBrush(Colors.Orange);
                }
                else if (task.RowType == RowType.ProductionRow)
                {
                    e.Style.Background = new SolidColorBrush(Colors.Green);
                }
                else if (task.RowType == RowType.TaskRow)
                {
                    e.Style.Background = new SolidColorBrush(Colors.LightGray);
                }
            }
        }
    }
}

Step 3: The use case involves changing the color of each row based on its type. To denote that row, add a new property like RowType to the corresponding model class, as shown in the following code sample.

public enum RowType
{
    Projectrow,
    SubProjectRow,
    AnalysisRow,
    ProductionRow,
    TaskRow
}

View the sample from GitHub.

Did you find this information helpful?

Yes

Comments (0)

How to customize the color of specific group in WPF GanttControl

Access denied