Edit this page

Getting Started

This tutorial will walk you through the creation of a sample application that contains RadGanttView and will show you how to:

In order to use the RadGanttView control in your projects you have to add references to the following assemblies:

  • Telerik.Windows.Controls
  • Telerik.Windows.Controls.GanttView
  • Telerik.Windows.Scheduling.Core

Add RadGanttView to your project

  • Create new WPF project.

  • Now add a RadGanttView control to the user control. You can add the control by dragging it from the Toolbox and dropping it over the XAML or do it manually by writing the XAML code that is shown below.

<UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"&gt;&#13;    <Grid>
        <telerik:RadGanttView x:Name="ganttView" />
    </Grid>
</UserControl>
  • Now if you run the application you will see an empty GanttView:

ganttview gettingstarted 010

Define columns

You should manually define the columns of the data grid in order to show additional details of the task:

<telerik:RadGanttView x:Name="ganttView2">
    <telerik:RadGanttView.Columns>
        <telerik:TreeColumnDefinition Header="Title" Width="AutoHeaderAndContent"/>
        <telerik:ColumnDefinition MemberBinding="{Binding Start}" Header="Start" Width="AutoHeaderAndContent"/>
        <telerik:ColumnDefinition MemberBinding="{Binding End}" Header="End" Width="AutoHeaderAndContent"/>
    </telerik:RadGanttView.Columns>
</telerik:RadGanttView>

Check the Columns Overview topic for more information about the columns of the data grid.

Bind the GanttView

  • In order to populate your GanttView control with some sample data, first you should create a collection of GanttTask objects:

var date = DateTime.Now;

var task1 = new GanttTask(date, date.AddDays(1), "task 1");
var task2 = new GanttTask(date.AddDays(1), date.AddDays(1).AddHours(15), "task 2");

var mainTask = new GanttTask(date, date.AddDays(2), "my task")
{
    Children = { task1, task2 }
};

var Tasks = new ObservableCollection<GanttTask>() { mainTask };
  • Then bind Tasks collection to TasksSource property of the RadGanttView:

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

Now run your application and see the result:

ganttview gettingstarted 020