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;