Indicate Special Days in RadGanttView
| Date Posted | Product | Author |
|---|---|---|
| February 09, 2015 | RadGanttView for WinForms | Hristo Merdjanov |
Problem
By default, RadGanttView visualizes its items in rows, where all tasks are aligned according to the beginning and end time of each task. There is no clear column indication in the GraphicalViewElement. This article demonstrates a sample approach how to achieve it.
Solution
We need to override the PaintElement method in the GanttViewGraphicalViewElement. For this purpose, we should also create a custom RadGanttView control containing a custom RadGanttViewElement.
Let`s first populate some data in our RadGanttView:
private void AddTasks()
{
//Setup data items
GanttViewDataItem item1 = new GanttViewDataItem();
item1.Start = new DateTime(2014, 12, 15);
item1.End = new DateTime(2014, 12, 20);
item1.Progress = 30m;
item1.Title = "Summary task.1. title";
GanttViewDataItem subItem11 = new GanttViewDataItem();
subItem11.Start = new DateTime(2014, 12, 16);
subItem11.End = new DateTime(2014, 12, 18);
subItem11.Progress = 10m;
subItem11.Title = "Sub-task.1.1 title";
GanttViewDataItem subItem12 = new GanttViewDataItem();
subItem12.Start = new DateTime(2014, 12, 21);
subItem12.End = new DateTime(2014, 12, 23);
subItem12.Progress = 20m;
subItem12.Title = "Sub-task.1.2 title";
//Add subitems
item1.Items.Add(subItem11);
item1.Items.Add(subItem12);
this.customRadGanttView.Items.Add(item1);
GanttViewDataItem item2 = new GanttViewDataItem();
item2.Start = new DateTime(2014, 12, 21);
item2.End = new DateTime(2014, 12, 12);
item2.Progress = 40m;
item2.Title = "Summary task.2. title";
GanttViewDataItem subitem21 = new GanttViewDataItem();
subitem21.Start = new DateTime(2014, 12, 17);
subitem21.End = new DateTime(2014, 12, 20);
subitem21.Progress = 10m;
subitem21.Title = "Sub-task.2.1 title";
GanttViewDataItem subitem22 = new GanttViewDataItem();
subitem22.Start = new DateTime(2014, 12, 21);
subitem22.End = new DateTime(2014, 12, 23);
subitem22.Progress = 30m;
subitem22.Title = "Sub-task.2.2 title";
GanttViewDataItem subitem23 = new GanttViewDataItem();
subitem23.Start = new DateTime(2014, 12, 18);
subitem23.End = new DateTime(2014, 12, 20);
subitem23.Title = "Sub-task.2.3 title";
//Add subitems
item2.Items.Add(subitem21);
item2.Items.Add(subitem22);
item2.Items.Add(subitem23);
this.customRadGanttView.Items.Add(item2);
//Add links between items
GanttViewLinkDataItem link1 = new GanttViewLinkDataItem();
link1.StartItem = subItem11;
link1.EndItem = subItem12;
link1.LinkType = TasksLinkType.FinishToStart;
this.customRadGanttView.Links.Add(link1);
GanttViewLinkDataItem link2 = new GanttViewLinkDataItem();
link2.StartItem = subitem21;
link2.EndItem = subitem22;
link2.LinkType = TasksLinkType.StartToStart;
this.customRadGanttView.Links.Add(link2);
GanttViewLinkDataItem link3 = new GanttViewLinkDataItem();
link3.StartItem = subitem22;
link3.EndItem = subitem23;
link3.LinkType = TasksLinkType.FinishToStart;
this.customRadGanttView.Links.Add(link3);
GanttViewTextViewColumn titleColumn = new GanttViewTextViewColumn("Title");
GanttViewTextViewColumn startColumn = new GanttViewTextViewColumn("Start");
GanttViewTextViewColumn endColumn = new GanttViewTextViewColumn("End");
this.customRadGanttView.GanttViewElement.Columns.Add(titleColumn);
this.customRadGanttView.GanttViewElement.Columns.Add(startColumn);
this.customRadGanttView.GanttViewElement.Columns.Add(endColumn);
}
Private Sub AddTasks()
'Setup data items
Dim item1 As New GanttViewDataItem()
item1.Start = New DateTime(2014, 12, 15)
item1.[End] = New DateTime(2014, 12, 20)
item1.Progress = 30D
item1.Title = "Summary task.1. title"
Dim subItem11 As New GanttViewDataItem()
subItem11.Start = New DateTime(2014, 12, 16)
subItem11.[End] = New DateTime(2014, 12, 18)
subItem11.Progress = 10D
subItem11.Title = "Sub-task.1.1 title"
Dim subItem12 As New GanttViewDataItem()
subItem12.Start = New DateTime(2014, 12, 21)
subItem12.[End] = New DateTime(2014, 12, 23)
subItem12.Progress = 20D
subItem12.Title = "Sub-task.1.2 title"
'Add subitems
item1.Items.Add(subItem11)
item1.Items.Add(subItem12)
Me.CustomRadGanttView.Items.Add(item1)
Dim item2 As New GanttViewDataItem()
item2.Start = New DateTime(2014, 12, 21)
item2.[End] = New DateTime(2014, 12, 12)
item2.Progress = 40D
item2.Title = "Summary task.2. title"
Dim subitem21 As New GanttViewDataItem()
subitem21.Start = New DateTime(2014, 12, 17)
subitem21.[End] = New DateTime(2014, 12, 20)
subitem21.Progress = 10D
subitem21.Title = "Sub-task.2.1 title"
Dim subitem22 As New GanttViewDataItem()
subitem22.Start = New DateTime(2014, 12, 21)
subitem22.[End] = New DateTime(2014, 12, 23)
subitem22.Progress = 30D
subitem22.Title = "Sub-task.2.2 title"
Dim subitem23 As New GanttViewDataItem()
subitem23.Start = New DateTime(2014, 12, 18)
subitem23.[End] = New DateTime(2014, 12, 20)
subitem23.Title = "Sub-task.2.3 title"
'Add subitems
item2.Items.Add(subitem21)
item2.Items.Add(subitem22)
item2.Items.Add(subitem23)
Me.CustomRadGanttView.Items.Add(item2)
'Add links between items
Dim link1 As New GanttViewLinkDataItem()
link1.StartItem = subItem11
link1.EndItem = subItem12
link1.LinkType = TasksLinkType.FinishToStart
Me.CustomRadGanttView.Links.Add(link1)
Dim link2 As New GanttViewLinkDataItem()
link2.StartItem = subitem21
link2.EndItem = subitem22
link2.LinkType = TasksLinkType.StartToStart
Me.CustomRadGanttView.Links.Add(link2)
Dim link3 As New GanttViewLinkDataItem()
link3.StartItem = subitem22
link3.EndItem = subitem23
link3.LinkType = TasksLinkType.FinishToStart
Me.CustomRadGanttView.Links.Add(link3)
Dim titleColumn As New GanttViewTextViewColumn("Title")
Dim startColumn As New GanttViewTextViewColumn("Start")
Dim endColumn As New GanttViewTextViewColumn("End")
Me.CustomRadGanttView.GanttViewElement.Columns.Add(titleColumn)
Me.CustomRadGanttView.GanttViewElement.Columns.Add(startColumn)
Me.CustomRadGanttView.GanttViewElement.Columns.Add(endColumn)
End Sub
Below is a screenshot of the control with its default look:
We can now start our own implementation of the CustomGanttViewGraphicalViewElement by inheriting the GanttViewGraphicalViewElement class. Following our business logic we should create a public property which will contain a list of the customized special days. In the PaintElement method override we are going to paint a vertical line for each date as well as a grey background for the weekends and an orange background for the special dates.
public class CustomGanttViewGraphicalViewElement : GanttViewGraphicalViewElement
{
private List<DateTime> specialDates = new List<DateTime>();
public CustomGanttViewGraphicalViewElement(RadGanttViewElement ganttView)
: base(ganttView)
{ }
public List<DateTime> SpecialDates
{
get { return specialDates; }
set { specialDates = value; }
}
protected override Type ThemeEffectiveType
{
get { return typeof(GanttViewGraphicalViewElement); }
}
//Logic for painting the elements
protected override void PaintElement(Telerik.WinControls.Paint.IGraphics graphics, float angle, System.Drawing.SizeF scale)
{
base.PaintElement(graphics, angle, scale);
Rectangle clipRect = this.Bounds;
Graphics g = graphics.UnderlayGraphics as Graphics;
g.SetClip(clipRect);
DateTime currentDate = this.TimelineBehavior.AdjustedTimelineStart;
while (currentDate <= this.TimelineBehavior.AdjustedTimelineEnd)
{
float x = (float)((currentDate - this.TimelineBehavior.AdjustedTimelineStart).TotalSeconds / this.OnePixelTime.TotalSeconds);
x -= this.HorizontalScrollBarElement.Value;
float y = this.GanttViewElement.HeaderHeight;
float y2 = this.Bounds.Height;
if (currentDate.DayOfWeek == DayOfWeek.Saturday || currentDate.DayOfWeek == DayOfWeek.Sunday)
{
graphics.FillRectangle(new RectangleF(x, y, 100f, y2), Color.LightGray);
}
else if (this.SpecialDates.Contains(currentDate.Date))
{
graphics.FillRectangle(new RectangleF(x, y, 100f, y2), Color.Orange);
}
else
{
graphics.FillRectangle(new RectangleF(x, y, 100f, y2), Color.White);
}
graphics.DrawLine(Color.LightBlue, x, y, x, y2);
currentDate = currentDate.AddDays(1);
}
g.ResetClip();
}
}
Public Class CustomGanttViewGraphicalViewElement
Inherits GanttViewGraphicalViewElement
Private m_specialDates As New List(Of DateTime)()
Public Sub New(ganttView As RadGanttViewElement)
MyBase.New(ganttView)
End Sub
Public Property SpecialDates() As List(Of DateTime)
Get
Return m_specialDates
End Get
Set(value As List(Of DateTime))
m_specialDates = value
End Set
End Property
Protected Overrides ReadOnly Property ThemeEffectiveType() As Type
Get
Return GetType(GanttViewGraphicalViewElement)
End Get
End Property
'Logic for painting the elements
Protected Overrides Sub PaintElement(graphics As Telerik.WinControls.Paint.IGraphics, angle As Single, scale As System.Drawing.SizeF)
MyBase.PaintElement(graphics, angle, scale)
Dim clipRect As Rectangle = Me.Bounds
Dim g As Graphics = TryCast(graphics.UnderlayGraphics, Graphics)
g.SetClip(clipRect)
Dim currentDate As DateTime = Me.TimelineBehavior.AdjustedTimelineStart
While currentDate <= Me.TimelineBehavior.AdjustedTimelineEnd
Dim x As Single = CSng((currentDate - Me.TimelineBehavior.AdjustedTimelineStart).TotalSeconds / Me.OnePixelTime.TotalSeconds)
x -= Me.HorizontalScrollBarElement.Value
Dim y As Single = Me.GanttViewElement.HeaderHeight
Dim y2 As Single = Me.Bounds.Height
If currentDate.DayOfWeek = DayOfWeek.Saturday OrElse currentDate.DayOfWeek = DayOfWeek.Sunday Then
graphics.FillRectangle(New RectangleF(x, y, 100.0F, y2), Color.LightGray)
ElseIf Me.SpecialDates.Contains(currentDate.[Date]) Then
graphics.FillRectangle(New RectangleF(x, y, 100.0F, y2), Color.Orange)
Else
graphics.FillRectangle(New RectangleF(x, y, 100.0F, y2), Color.White)
End If
graphics.DrawLine(Color.LightBlue, x, y, x, y2)
currentDate = currentDate.AddDays(1)
End While
g.ResetClip()
End Sub
Now, we are ready to substitute the GanttViewGraphicalViewElement in the RadGanttViewElement class. For the purpose we should make our own implementation and perform this operation:
public class CustomGanttViewElement : RadGanttViewElement
{
protected override GanttViewGraphicalViewElement
CreateGraphicalViewElement(RadGanttViewElement ganttView)
{
return new CustomGanttViewGraphicalViewElement(this);
}
protected override Type ThemeEffectiveType
{
get { return typeof(RadGanttViewElement); }
}
}
Public Class CustomGanttViewElement
Inherits RadGanttViewElement
Protected Overrides Function CreateGraphicalViewElement(ganttView As RadGanttViewElement) As GanttViewGraphicalViewElement
Return New CustomGanttViewGraphicalViewElement(Me)
End Function
Protected Overrides ReadOnly Property ThemeEffectiveType() As Type
Get
Return GetType(RadGanttViewElement)
End Get
End Property
End Class
Going up in the hierarchy, now we should create our own RadGanttView control containing the already created in the previous step CustomGanttViewElement:
public class CustomGanttView : RadGanttView
{
protected override RadGanttViewElement CreateGanttViewElement()
{
return new CustomGanttViewElement();
}
public override string ThemeClassName
{
get { return typeof(RadGanttView).FullName; }
}
}
Public Class CustomGanttView
Inherits RadGanttView
Protected Overrides Function CreateGanttViewElement() As RadGanttViewElement
Return New CustomGanttViewElement()
End Function
Public Overrides Property ThemeClassName As String
Get
Return GetType(RadGanttView).FullName
End Get
Set(value As String)
MyBase.ThemeClassName = value
End Set
End Property
End Class
A complete solution in C# and VB.NET can be found here.