Saturday, April 10, 2010

RowDetailsTemplate in Silverlight DataGrid

This is my first blog on silverlight. Silver datagrid does not support hierarchical data directly. I had a task to create hierarchical datagrid in Silverlight. I have explored many options and during which I came to know about two good features. One is RowDetailsTemplate in Silverlight Datagrid, and another is RowGrouping feature. This blog is about RowDetailsTemplate.

Generally, RowDetailsTemplate is used to display additional information of a row. It has many advantages. First it does not affect a dimension of rows and cells. Its visibility can be managed on row wise.

To create RowDetailsTemplate for row in datagrid we have to set RowDetailsTemplate to as particular template. It can hold any control. Following is an example of RowDetailsTemplate.

<data:datagrid name="datagrid1" row="0" column="0" rowdetailsvisibilitymode="Collapsed">
         <data:datagrid name="datagrid2" headersvisibility="None">

As we can see from above code that we can put any control inside RowDetailsTemplate. Here we have kept another grid inside RowDetailsTemplate. Control inside row details shares same data context as of data grid so we can bind controls inside row details.

With RowDetailsVisibilityMode, we can set visibility of row details it has three values.

1) Collpased: Row details are not visible.
2) Visible: Row details are visible.
3) VisibleWhenSelected: When a row selected its row details will be visible.

Default value is VisibleWhenSelected.

RowDetailsVisibilityChanged event is available when row detail visibility changed. With RowDetailsVisibilityMode set to visible when selected, when a row gets selected RowDetailsVisibilityChanged event gets fired. This event also fires for the first row when another row is selected.

Furthermore, we can control detail visibility of an individual rows with DetailsVisibility property of Row.

In short RowDetailsTemplate is a powerful feature of silverlight data grid. Developer can enhance interactivity and functionality of data grid with this feature.

I have used this feature to create hierarchical data grid. If you have any questions or comments, please let me know.


  1. Hi,

    I have the RowDetailsVisibilityMode set to "VisibleWhenSelected". Clicking on a row expands it - cool. But I also want to collapse that row if I click again. Also by default the first row in the grid is expanded - which is not exactly convenient for me... How do I these without code-behind :0)


  2. Hi Daniela,

    Sorry for late reply. As I have mentioned in the blog that we can control details visibilty of individual row with DetailsVisibility property of Row.You can achieve required behavior with this property. On rowclick event of grid you can check if rows details are visible then collpase it and if its collapsed then expand it.

    Hope this helps you.

    Hiren Dave

  3. Is it possible to see the source code of this example.


  4. where the source code???