GanttControl.CustomizeItem Event
Allows you to modify items generated from HTML templates.
Namespace: DevExpress.XtraGantt
Assembly: DevExpress.XtraGantt.v24.2.dll
Declaration
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;
}
}