Getting Started with GanttView - part 1

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:

Telerik.Windows.Controls

Telerik.Windows.Controls.GanttView

Telerik.Windows.Scheduling.Core

Now, let’s add the telerik namespace:

xmlns:telerik=http://schemas.telerik.com/2008/xaml/presentation

Аnd add a sample definition of the control:

<telerik:RadGanttView/>

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

Image may be NSFW.
Clik here to view. 

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

{
    get
    {
       return tasks;
    }
    set
    {
       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>();

gTasks.Add(iterationTask);

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:

Image may be NSFW.
Clik here to view. 

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
{
    get
    {
       return visibleRange;
    }
    set
    {
       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:

Image may be NSFW.
Clik here to view. 

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:RadGanttView.Columns>

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

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

                     </telerik:RadGanttView.Columns>

              </telerik:RadGanttView>

Result:

Image may be NSFW.
Clik here to view.
 

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:ColumnDefinition.CellEditTemplate>

                                         <DataTemplate>

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

                                         </DataTemplate>

                                  </telerik:ColumnDefinition.CellEditTemplate>

                           </telerik:ColumnDefinition>

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

                                  <telerik:ColumnDefinition.CellEditTemplate>

                                         <DataTemplate>

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

                                         </DataTemplate>

                                  </telerik:ColumnDefinition.CellEditTemplate>

                           </telerik:ColumnDefinition>

 

With this post we setup our first basic project with RadGanttView.

Image may be NSFW.
Clik here to view. 

You can download the project here. With next posts we will discover more about how to customize the look and feel of the control, set a theme, configure the TimeRuler and add custom gantt tasks. Meanwhile, you can review our documentation and online demos for more details how to configure the GanttView.

Stay tuned!

Image may be NSFW.
Clik here to view.