Customize the TimeLine Data and Containers
In RadGanttView it is possible to customize the way items are rendered in the TimeLine portion of the control and add additional custom elements by creating a custom TimeLineVisualizationBehavior.
Creating a TaskDeadline
In the next example we will show how to create a deadline for each task in the TasksSource of the GanttView control and render a corresponding visual line on the TimeLine portion of the control.
The example will go through on the following key steps:
Creating a custom TimeLineEventInfo
Creating a custom TimeLineContainer
Creating a custom TimeLineContainerSelector
Creating a custom TimeLineBehavior
Before proceeding with this tutorial you should get familiar with Implementing View-ViewModel help article.
It is important to note that when creating a custom TimeLineVisualizationBehavior you will need to set a negative Margin to the Style for the custom TimeLineContainer (Step 7) in order for the visual element to be visible in the TimeLine portion of the control. Also you will need to set the Template of the container (Step 7).
-
First you will need to create a custom GanttTask and add the need GanttDeadLine property:
-
Create a ViewModel, initialize and populate its Tasks and VisibleTime properties with some sample data:
-
Next you will need to create a TimeLineDeadlineEventInfo class that inherits SlotInfo class, this class will hold the information for the containers that need to be rendered in the TimeLine portion of the GanttView control:
-
Create TimeLineDeadlineBehavior class that inherits DefaultGanttTimeLineVisualizationBehavior class and override its GetEventInfos() method:
The DefaultGanttTimeLineVisualizationBehavior is responsible for rendering the Tasks, their relations and highlight drag visual in the TimeLine portion of the control.
-
Create a TimeLineDeadlineBehavior property of type ITimeLineVisualizationBehavior and initialize it in the ViewModel.
-
Create a custom TimeLineDeadlineContainer that inherits Control class and implements IDataContainer interface:
-
Create a Style that targets the newly created TimeLineDeadlineContainer and set its properties:
-
Next you will need to create a custom TimeLineDeadlineContainerSelector that inherits DefaultTimeLineContainerSelector and override its GetContainerType() method in order to return the custom container.
-
Finally you will need to add the GanttView control in XAML by setting its TasksSource, TimeLineVisualizationBehavior, VisibleRange and TimelineContainerSelector. The GanttView control should look like this:
The next screenshot shows the final result (the red lines represent the deadlines for each task):
Creating a ProjectDeadline
The following example shows how to customize the EventInfo and TimeLineVisualizationBehavior of the previous example in order to create a major deadline for the whole project in the GanttView control.
Repeat the steps from the preview example but on step 3 create the EventInfo as follows:
And on step 4 create the custom TimeLineDeadlineBehavior as follows:
Finally we will need to create a ProjectDeadline property in the ViewModel of type DateTime and initialize it with a sample data:
The next screenshot shows the final result (the red line represents the ProjectDeadline):