RadControls for WPF

In RadGanttView displaying the Tasks fields is done with the use of different columns. There are two types of columns that could be defined in the control: TreeColumn and a normal Column. The TreeColumn is a special type of column that is used to visualize the tasks and their children as a tree. Both types of columns have the following customizable Templates: CellTemplate, CellEditTemplate, CellHighlightTemplate and CellSelectionTemplate.

Note
Before proceeding with the following example you should get familiar with Implementing View-ViewModel.

Important

With our official Q1 2013 release of RadGanttView you can set each ColumnDefinition’s Width to a set of predefined values (50, 100, 150, 200, 250, 300, AutoHeader and AutoHeaderAndContent). The AutoHeader and AutoHeaderAndContent calculate the necessary Width automatically in the code of the control. The 50 to 300 values are predefined values in inches. The AutoHeader is a predefined value that will set the Width of the ColumnDefinition to the Width that is required in order to render its Header. The AutoHeaderAndContent is a predefined value that will set the Width of the ColumnDefinition to the Width that is required in order to render its Header and content. If one is bigger than the other the bigger value will be used.

In order to define columns in the RadGanttView control all that is needed is to add them to the Columns collection of the control.

• First you will need to declare the RadGanttView control and populate it with some data:

  CopyXAML

  <telerik:RadGanttView TasksSource="{Binding Tasks}"
                        VerticalAlignment="Top"
                        VisibleRange="{Binding VisibleTime}">
  </telerik:RadGanttView>

• Then define the needed columns to the Columns collection of the control:

  CopyXAML

  <telerik:RadGanttView TasksSource="{Binding Tasks}"
                        VerticalAlignment="Top"
                        VisibleRange="{Binding VisibleTime}">
      <telerik:RadGanttView.Columns>
          <telerik:TreeColumnDefinition/>
          <telerik:ColumnDefinition/>
          <telerik:ColumnDefinition/>
      </telerik:RadGanttView.Columns>
  </telerik:RadGanttView>

• Finally set the Header, MemberBinding and any other properties of the columns:

  CopyXAML

  <telerik:RadGanttView TasksSource="{Binding Tasks}"
              VerticalAlignment="Top"
              VisibleRange="{Binding VisibleTime}">
      <telerik:RadGanttView.Columns>
          <telerik:TreeColumnDefinition Header="Title" MemberBinding="{Binding 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>

The next screenshot shows the final result: