Implementing View-ViewModel

The purpose of this tutorial is to show you how to bind a RadGanttView with a ViewModel.

Before reading this tutorial you should get familiar with the Data Binding support of the RadGanttView control.

• Add a new RadGanttView declaration in your XAML:

XAML

	<telerik:RadGanttView x:Name="ganttView" />

• Create a new class named MyViewModel:

C#

	public class MyViewModel
	{
	}

• In the MyViewModel class add Tasks property. We will bind the TasksSource property of the RadGanttView to this property.

C#

	public class MyViewModel : PropertyChangedBase
	{
	    private ObservableCollection<GanttTask> tasks;
	
	    public ObservableCollection<GanttTask> Tasks
	    {
	        get
	        {
	            return tasks;
	        }
	        set
	        {
	            tasks = value;
	            OnPropertyChanged(() => Tasks);
	        }
	    }
	}

• All we have to do is to initialize the tasks field:

C#

	public MyViewModel()
	{
	    var date = DateTime.Now;
	
	    var ganttAPI = new GanttTask() { Start = date, End = date.AddDays(2), Title = "Design public API" };
	    var ganttRendering = new GanttTask() { Start = date.AddDays(2).AddHours(8), End = date.AddDays(4), Title = "Gantt Rendering" };
	    var ganttDemos = new GanttTask() { Start = date.AddDays(5), End = date.AddDays(7), Title = "Gantt Demos" };
	
	    var milestone = new GanttTask() { Start = date.AddDays(7), End = date.AddDays(7).AddHours(1), Title = "Review", IsMilestone = true };
	
	    ganttRendering.Dependencies.Add(new Dependency() { FromTask = ganttAPI });
	    ganttDemos.Dependencies.Add(new Dependency() { FromTask = ganttRendering });
	
	    var iterationTask = new GanttTask(date, date.AddDays(7), "Iteration 1")
	    {
	        Children = { ganttAPI, ganttRendering, ganttDemos, milestone }
	    };
	
	
	    this.tasks = new ObservableCollection<GanttTask>() { iterationTask };
	}

• The ViewModel is complete. Now, let's return to the View. Add TasksSource property to the definition of the GanttView:

XAML

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

• Finally, set the DataContext:

C#

	this.DataContext = new MyViewModel();

And the result is: