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:

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

And add a sample definition of the control:

<telerik:RadGanttView/>

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

{
    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:

 

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:

 

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:


 

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>

 


Rossitza-Fakalieva
About the Author

Rossitza Fakalieva

Rossitza Fakalieva is a Technical Manager, Microsoft MVP in Developer Technologies and a Director of the Bulgarian chapter of the global Women Who Code organization. She previously worked on the Telerik engineering team and defines herself as .NET enthusiast. She loves to empower others to grow in their career and in the tech field—by teaching, by delivering courses and presentations, and as part of her daily job.

Related Posts

Comments

Comments are disabled in preview mode.