Edit this page

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:

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

        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:

        <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:

        <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:

radganttview-features-items-expand-collapse-1

radganttview-features-items-expand-collapse-2

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:

<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).

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:

radganttview-features-items-expand-collapse-3

radganttview-features-items-expand-collapse-4