Skip to main content
All docs
V24.2

GanttControl.CustomizeItem Event

Allows you to modify items generated from HTML templates.

Namespace: DevExpress.XtraGantt

Assembly: DevExpress.XtraGantt.v24.2.dll

Declaration

[DXCategory("Events")]
public event CustomizeItemEventHandler CustomizeItem

Event Data

The CustomizeItem event's data class is DevExpress.XtraGantt.CustomizeItemEventArgs.

Remarks

Check the e.ItemType property to find the template applied to the required UI element type.

void GanttControl1_CustomizeItem(object sender, CustomizeItemEventArgs e) {
    switch (e.ItemType) {
        case GanttChartItemType.Task:
            // Customize a template for regular tasks
            break;
        case GanttChartItemType.SummaryTask:
            // Customize a template for summary tasks
            break;
        case GanttChartItemType.TextLabel:
            // Customize a template for labels
            break;
    }
}

Use FindElement... methods to find an element within a template. You can search for elements that need to be modified by their tags, CSS classes, and IDs. The FindElementsByTag and FindElementsByClass methods return a list of all matching elements, whereas the FindElementById method returns a single element.

When an element that you want to modify is located, use the Style.SetProperty method that takes two parameters: attribute name and new attribute value (if no attribute with such name was found, it will be added to the CSS style). The following sample from the Gantt Control demo applies custom colors and border radiuses to regular tasks, summary tasks, and labels. Note that in this sample color values are retrieved from a data source. In your project, you can set these values explicitly (similar to how the “border-radius” value is set).

void GanttControl1_CustomizeItem(object sender, CustomizeItemEventArgs e) {
    // Retrieve a color for this task from the data source
    GanttChartTaskInfo ti = e.Item as GanttChartTaskInfo;
    if(ti == null) return;
    Color color = (Color)ti.Node.GetValue("Color");
    // Find templates for different UI element types
    switch (e.ItemType) {
        case GanttChartItemType.Task:
        case GanttChartItemType.SummaryTask:
            // Find element with the "task" ID
            var task = e.Element.FindElementById("task");
            if(task != null) {
                // Set new values for required CSS attributes
                task.Style.SetProperty("background-color", color.Name);
                task.Style.SetProperty("border-radius", "4px");
            }
            break;
        case GanttChartItemType.TextLabel:
            var label = e.Element.FindElementById("label"); 
            if(label != null) {
                label.Style.SetProperty("border-color", color.Name);
                label.Style.SetProperty("color", color.Name);
            }
            break;
    }
}
See Also