Expand and Collapse

In the RadGanttView control it is possible to customize the initial expand behavior of its tasks in order to achieve a custom desired behavior. You could easily achieve a fully initially expanded or collapsed behavior by setting the InitialExpandBehavior of the control. There is also a built-in expand and collapse service that could be used to expand and collapse a specific task from the code behind.

Custom InitialExpandBehavior

The next example demonstrates how to create a behavior that will collapsed only the lowest level (zero level) tasks and expand all of the inner tasks:

Before proceeding with this article you should get familiar with Implementing View-ViewModel.

1. First you should populate the RadGanttView control’s TasksSource properties with some sample data. More details can be found here.

2. Create a class that implements the IInitialExpandBehavior interface:

   • C#

       public class CustomInitialExpandBehavior : IInitialExpandBehavior 
       { 
           //... 

3. Implement its ShouldExpandItemByDefault() method by creating a condition that returns true if the HierarchicalItem’s Level is above 0:

   • C#

       public class CustomInitialExpandBehavior : IInitialExpandBehavior 
       { 
           public bool ShouldExpandItemByDefault(Telerik.Windows.Core.HierarchicalItem item) 
           { 
               var shouldExpand = item.Level > 0; 
    
               return shouldExpand; 
           } 
       } 

4. Declare the control in the xaml and set its Columns. The RadGanttView control should look like this:

   • XAML

       <telerik:RadGanttView TasksSource="{Binding Tasks}" 
                             VisibleRange="{Binding VisibleTime}"> 
           <telerik:RadGanttView.Columns> 
               <telerik:TreeColumnDefinition Header="Title" MemberBinding="{Binding Title}" Width="130"/> 
               <telerik:ColumnDefinition MemberBinding="{Binding Start}" Header="Start" Width="130"/> 
               <telerik:ColumnDefinition MemberBinding="{Binding End}" Header="End" Width="130"/> 
           </telerik:RadGanttView.Columns> 
       </telerik:RadGanttView> 

5. Finally you will need to set the InitialExpandBehavior of the RadGanttView control to the newly created CustomInitialExpandBehavior:

   • XAML

       <telerik:RadGanttView TasksSource="{Binding Tasks}" 
         VisibleRange="{Binding VisibleTime}" 
         InitialExpandBehavior="{StaticResource CustomInitialExpandBehavior}"> 
           <telerik:RadGanttView.Columns> 
               <telerik:TreeColumnDefinition Header="Title" MemberBinding="{Binding Title}" Width="130"/> 
               <telerik:ColumnDefinition MemberBinding="{Binding Start}" Header="Start" Width="130"/> 
               <telerik:ColumnDefinition MemberBinding="{Binding End}" Header="End" Width="130"/> 
           </telerik:RadGanttView.Columns> 
       </telerik:RadGanttView> 

The next screenshots show the final result. At startup the lowers level (Big Iteration) task is collapsed while all of its inner tasks (Iteration 1, Iteration 2) are expanded:

Built-in ExpandCollapseService

In the RadGanttView control there is a built-in ExpandCollapseService that could be used to expand or collapse a specific task in the control.

The next example will enhance the previous example by adding two button one for expanding the “Big Iteration” task and one that collapses it.

• First you will need to declare the RadGanttView control and populate it with some sample data. We are going to use the previously explained in the “Custom InitialExpandBehavior” section example.

• Add two buttons and declare their Click events:

• XAML

<StackPanel Orientation="Horizontal"> 
    <TextBlock Text="Expand/Collapse Tasks with the use of the code behind:" Margin="10 0 0 20" VerticalAlignment="Center"/> 
    <Button Content="Expand Big Iteration Task" x:Name="ExpandButton" Click="ExpandButton_Click" Margin="10 0 10 20"/> 
    <Button Content="Collapse Big Iteration Task" x:Name="CollapseButton" Click="CollapseButton_Click" Margin="10 0 10 20"/> 
</StackPanel> 

• In the Click events of the two buttons call the ExpandItem() and CollapseItem() methods of the built-in ExpandCollapseService to expand and collapse the first task (the Big Iteration task).

• C#

private void ExpandButton_Click(object sender, RoutedEventArgs e) 
{ 
    var firstTask = (this.GanttView.TasksSource as IList<GanttTask>)[0]; 
    this.GanttView.ExpandCollapseService.ExpandItem(firstTask); 
} 
 
private void CollapseButton_Click(object sender, RoutedEventArgs e) 
{ 
    var firstTask = (this.GanttView.TasksSource as IList<GanttTask>)[0]; 
    this.GanttView.ExpandCollapseService.CollapseItem(firstTask); 
} 

The next screenshots show the final result:

Getting the Expanded State of GanttTask

The expand state of the tasks is held by the HierarchicalCollectionAdapter of the RadGantView's ExpandCollapseService. The adapter exposes a method named GetItemWrapperByItemKey which returns a HierarchicalItem object, which has a IsExpanded property.

Getting the expanded state of GanttTask via the corresponding HierarchicalItem

• C#

GanttTask task = myTasksSource[0]; 
HierarchicalItem hierarchicalItem = this.ganttView.ExpandCollapseService.HierarchicalCollectionAdapter.GetItemWrapperByItemKey(task); 
bool isTaskExpanded = hierarchicalItem.IsExpanded;