Synchronizing group row headers with column headers in Silverlight DataGrid

Emiel August 20, 2010 DataGrid, Silverlight 4 Comments

Update

The code for the functionality in this post has been updated in Update postings on Datagrid

Grouping in the DataGrid in Silverlight is quite easy. What is not so obvious is how to change the caption of the column name on the group row. It turns out that you could use the LoadingRowGroup of the DataGrid: 

theGrid.LoadingRowGroup += (s, e) =>
{
    e.RowGroupHeader.PropertyName = "A custom caption";
}

The original value of the e.RowGroupHeader.PropertyName is the PropertyName of the PropertyGroupDescription. Using this value the column header can be determined: 

private string GetColumnCaption(DataGrid grid, string columnName)
{
    if (grid == null || String.IsNullOrEmpty(columnName))
    {
        return null;
    }
 
    foreach (DataGridBoundColumn column in grid.Columns)
    {
        if (column == null)
        {
            continue;
        }
        Binding binding = column.Binding;
        if (binding == null)
        {
            continue;
        }
        if (binding.Path.Path == columnName)
        {
            return Convert.ToString(column.Header);
        }
    }
 
    return null;
}

Using this function synchronizing the group row header with column headers becomes almost trivial: 

theGrid.LoadingRowGroup += (s, e) =>
{
    string columnName = e.RowGroupHeader.PropertyName;
    string columnCaption = GetColumnCaption(sender as DataGrid, columnName);
 
    if (!String.IsNullOrEmpty(columnCaption))
    {
        e.RowGroupHeader.PropertyName = columnCaption;
    }
}

Other interesting properties of e.RowGroupHeader are:

  • PropertyNameVisibility: determines the visibility of the PropertyName
  • ItemCountVisibility: determines the visibility of the item count

The sourcecode for this blog can be found here.

Update

When the DataGrid is sorted, the group row headers display their old captions again. See this post for a possible solution.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “Synchronizing group row headers with column headers in Silverlight DataGrid”

  1. Tweets that mention On developing Pochet.NET» Blog Archive » Synchronizing group row headers with column headers in Silverlight DataGrid -- Topsy.com said:

    Aug 20, 10 at 4:42 pm

    [...] This post was mentioned on Twitter by Silverlight News, silverlightrays. silverlightrays said: Synchronizing group row headers with column headers in Silverlight DataGrid – http://bit.ly/dwQYOy http://ff.im/-pq6YU [...]

  2. Andy said:

    Aug 25, 10 at 7:49 pm

    Jongerius,

    Very nice post sir. However, I have a small issue with your code. When I scrolled to the bottom using a vertical scroll bar, then I scrolled back up. The caption came back to the column name instead of column caption. In your example, it came back to ‘Title’ instead of ‘The header for Title’ .

    Please let me know how I can fix this.

    Very appreciate your help. Again, very nice post

    Andy

  3. Emiel said:

    Aug 29, 10 at 11:03 pm

    Good catch!

    You can find a solution to this problem in this post.

  4. Cyncz.com – Synchronizing All Your Contacts | Startup Websites said:

    Sep 21, 10 at 11:19 pm

    [...] On developing Pochet.NET» Blog Archive » Synchronizing group row … Posted in Latest Websites | Tags: Contacts, Cyncz.com, Synchronizing [...]

Leave a Reply