Telerik blogs

Programming with the new GanttView control

As many of you already know with Q1 2012 we introduced a RadGanttView for Silverlight and WPF - a control designed with MVVM-friendly API.

In this blog post we will set-up a sample project with RadGanttView to get you started.

First, to add RadGanttView to a new or existing application we need to add references to the following assemblies:




Now, let’s add the telerik namespace:


And add a sample definition of the control:


Here is a screenshot of what you should see after running the project:


Now, we will create a data source in our ViewModel and bind it to the control: First we will create an observable collection of GanttTask objects

private IEnumerable <GanttTask> tasks;

public IEnumerable<GanttTask> Tasks

       return tasks;
       tasks = value;
       OnPropertyChanged(() => Tasks);

And populate it in the constructor of the ViewModel:

var date = DateTime.Now;
var iterationTask = new GanttTask() { Start = date, End = date.AddDays(2), Title = "1/11/2012 - 1/12/2012 Iteration" };

var ganttAPI = new GanttTask() { Start = date, End = date.AddHours(16), Title = "Design public API" };

var ganttDemos = new GanttTask() { Start = date.AddHours(18), End = date.AddDays(1), Title = "Gantt Demos" };
var ganttRendering = new GanttTask() { Start = date.AddDays(1).AddHours(5), End = date.AddDays(2), Title = "Gantt Rendering" };

var milestone = new GanttTask() { Start = date.AddDays(2), End = date.AddDays(2).AddHours(1), Title = "Review", IsMilestone = true };

ganttAPI.SetRelations(new List<Relation>() { new Relation() { Task = ganttDemos } });

ganttDemos.SetRelations(new List<Relation>() { new Relation() { Task = ganttRendering } });

iterationTask.SetChildren(new ObservableCollection<GanttTask>() { ganttAPI, ganttDemos, ganttRendering, milestone });

var gTasks = new ObservableCollection<GanttTask>();


this.Tasks = gTasks;

Now, we will bind the Tasks collection to the TaskSource property of GanttView:

 <telerik:RadGanttView TasksSource="{Binding Tasks}"/>

And after running the project we will see the image below:


As you can see the last item is not visible in the task panel, because it is outside the VisibleRange. We can change this by configuring the VisibleRange property of Gantt control.

Configuring the VisibleRange property of Gantt control

To do this we will add a VisbleRange property in the ViewModel:

private VisibleRange visibleRange;

public VisibleRange VisibleRange
       return visibleRange;
       if (visibleRange != value)
           visibleRange = value;
           OnPropertyChanged(() => VisibleRange);

Set it in the constructor:

this.VisibleRange = new VisibleRange(date, date.AddDays(9));

Аnd bind it in the XAML:

<telerik:RadGanttView TasksSource="{Binding Tasks}"

                       VisibleRange="{Binding VisibleRange}"/> 

Now, all items are visible:


Configuring the grid panel

Now let’s add some more details than Title about the tasks in the grid panel. Let’s add their Start and End fields: To do this we should add columns for every task’s property that we want to display: 

<telerik:RadGanttView TasksSource="{Binding Tasks}" VisibleRange="{Binding VisibleRange}">


                           <telerik:ColumnDefinition MemberBinding="{Binding Start}" Header="Start" ColumnWidth="140" />

                           <telerik:ColumnDefinition MemberBinding="{Binding End}" Header="End" ColumnWidth="140" />





Finally let’s allow the editing of Start and End fields by adding a CellEditTemplate. We’d like to use the RadDateTimePicker control, so we will need a reference to Telerik.Windows.Controls.Input.dll assembly as it contains this control.

<telerik:ColumnDefinition MemberBinding="{Binding Start}" Header="Start" ColumnWidth="140" >



                                                <telerik:RadDateTimePicker SelectedValue="{Binding Start}" />




                           <telerik:ColumnDefinition MemberBinding="{Binding End}" Header="End" ColumnWidth="140">



                                                <telerik:RadDateTimePicker SelectedValue="{Binding End}" />





About the Author

Rossitza Fakalieva

Rossitza Fakalieva is Manager of the Progress .NET UI & Tools division, which develops the UI for WPF, UI for WinForms, UI for UWP and UI for Xamarin products. She started her career on the Telerik ASP.NET team in 2006 as a support officer and passed through the position of software developer to the position of senior manager. Off work, she enjoys cooking, watching movies and reading books.

Related Posts


Comments are disabled in preview mode.