Collapsing groups in Silverlight Datagrid

One of my friends commented on “Missing functionality” of collapsing the groups in silverlight 3.0 datagrid.

I decided to blog this piece as i realized that though it is obvious to me “how this will work”, no blog has yet been dedicated to this.

so here it goes..
The problem: Display the datagrid so that all the groups are NOT expanded.
here is a snapshot. As you may observe, By default, every group is expanded (which may clutter the UI a bit)
Silverlight DataGrid

It should look like (one level collapsed) :

Silverlight datagrid Collapsed
or fully collapsed
Silverlight Datagrid

Here is the XAML: Just for a more complex scenario(and to show how grouping may be done via XAML or C# code behind/ or both), we have used grouping Dept via XAML and via gender using C#.

<StackPanel>

<TextBlock Text=”Expand/Collapse Datagrid Demo ” Style=”{StaticResource HeaderTextStyle}”/>

<StackPanel Style=”{StaticResource ContentTextPanelStyle}” Orientation=”Horizontal”>
<Button Click=”Button_Click” Content=”Collapse all”></Button>
<Button Click=”Button_Click” Content=”Expand all”></Button>
<Button Click=”btnOneLevel_Click”  Content=”Collapse one level”></Button>
<Button Click=”btnOneLevel_Click”  Content=”Expand one level”></Button>
</StackPanel>
<StackPanel Style=”{StaticResource ContentTextPanelStyle}”>
<data:DataGrid x:Name=”MyGrid” ItemsSource=”{Binding}”  >
<data:DataGrid.GroupDescriptions>
<cm:PropertyGroupDescription PropertyName=”Dept”    >

</cm:PropertyGroupDescription>
</data:DataGrid.GroupDescriptions>
</data:DataGrid>

</StackPanel>
</StackPanel>

and below is the codebehind:
Note the code in bold; specially the line DataContext = new PagedCollectionView(GetPeople());
which binda data to grid. Also pay attention to CollapseRowGroup() and ExpandRowGroup()

public HomePage()
{
InitializeComponent();

MyGrid.GroupDescriptions.Add(new PropertyGroupDescription(“Gender”));
DataContext = new PagedCollectionView(GetPeople());
}

private void Button_Click(object sender, RoutedEventArgs e)
{
bool actionCollapse = false;
Button button = sender as Button;
if ((string)button.Content == “Collapse all”)
{
actionCollapse = true;
}
PagedCollectionView PagedCollectionView = (PagedCollectionView)MyGrid.ItemsSource;
foreach (CollectionViewGroup CollectionViewGroup in PagedCollectionView.Groups)
{
if (actionCollapse)
{
MyGrid.CollapseRowGroup(CollectionViewGroup , true);
}
else
{
MyGrid.ExpandRowGroup(CollectionViewGroup, true);
}
}

}

private void btnOneLevel_Click(object sender, RoutedEventArgs e)
{
bool actionCollapse = false;
Button button = sender as Button;
if ((string)button.Content == “Collapse one level”)
{
actionCollapse = true;
}
PagedCollectionView PagedCollectionView = (PagedCollectionView)MyGrid.ItemsSource;
foreach (CollectionViewGroup CollectionViewGroup in PagedCollectionView.Groups)
{
foreach (CollectionViewGroup person in CollectionViewGroup.Items)
{
if (actionCollapse)
{
MyGrid.CollapseRowGroup(person, false);
}
else
{
MyGrid.ExpandRowGroup(person, false);
}
}
}
}

// Executes when the user navigates to this page.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
public List<Person> GetPeople()
{

List<Person> peeps = new List<Person>();

peeps.Add(new Person() { FirstName = “Subodh”, LastName = “Pushpak”, Gender = “M”, Dept = “Development” });
peeps.Add(new Person() { FirstName = “Subodh2”, LastName = “Pushpak2”, Gender = “M”, Dept = “Development” });

peeps.Add(new Person() { FirstName = “abc”, LastName = “Singh”, Gender = “F”, Dept = “Development” });
peeps.Add(new Person() { FirstName = “abc2”, LastName = “Singh2”, Gender = “F”, Dept = “Development” });

peeps.Add(new Person() { FirstName = “Happy”, LastName = “Singh”, Gender = “F”, Dept = “Testing” });
peeps.Add(new Person() { FirstName = “Happy2”, LastName = “Singh2”, Gender = “F”, Dept = “Testing” });

peeps.Add(new Person() { FirstName = “Hariraj”, LastName = “Singh”, Gender = “M”, Dept = “Testing” });

return peeps;

}

}
public class Person
{

#region FirstName
/// <summary>
/// Gets or sets FirstName
/// </summary>
public string FirstName { get; set; }
#endregion FirstName

#region LastName
/// <summary>
/// Gets or sets LastName
/// </summary>
public string LastName { get; set; }
#endregion LastName

#region Gender
/// <summary>
/// Gets or sets Gender
/// </summary>
public string Gender { get; set; }
#endregion Gender

#region Dept
/// <summary>
/// Gets or sets AgeGroup
/// </summary>
public string Dept { get; set; }
#endregion Dept
}

Here is the source code

Feel free to add your comments / suggestions.

Advertisements

3 thoughts on “Collapsing groups in Silverlight Datagrid

  1. Hi,

    I was trying this code, but it does not work when I specify the column defination instead of Autogenerating the columns. do you have any idea how to make it work.

    Thanks in advance.
    Irfan

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s