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)

It should look like (one level collapsed) :

or fully collapsed

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.

Blogged with the Flock Browser

Advertisement