Nested DataGrid using Silverlight 4 and WCF


It was a holiday today and I was totally free, so I thought of writing a new post but I was not having any topic to write. I started thinking and after sometime I got one topic that was “Nested DataGrid Using Silverlight” and Started working on it. Finally I could finish it.

In this example I have used Silverlight 4.0, Silverlight enabled WCF service to get the data. There is no database connectivity in this because I just wanted to show how we can use Nested Grid in Silverlight. For database connectivity with DataGrid in Silverlight you can refer

Creating New Project

  • Create new Silverlight Application


Click Ok


Adding Classes

Add two classes Employee and Language under MSCoderNestedDataGrid.Web as shown below




Adding Service

Right click on MSCoderNestedDataGrid.Web project.

Select Add -> New Item


Click Silverlight template in the Template list.

Select Silverlight enabled WCF Service.

Name it as “EmployeeService”.

Open EmployeeService.svc.cs

Write one method GetAllEmployees() which returns List<Employee> as shown below


Build MSCoderNestedDataGrid.Web project

Adding Service Reference

Add Employee service reference to MSCoderNestedDataGrid project

Right Click -> Add service reference

Click on Discover button

Name reference as “EmployeeServiceReference”


Adding DataGrid Control

Open MainPage.xaml

Add a DataGrid control to this form from ToolBox

Name it “grdEmployee”

Set ItemSource property as “{Binding}”

Add two TextColumns to grdEmployee and bind it as shown.


Add RowDetailsTemplate to grdEmployee


Add a DataGrid inside the DataTemplate

Name it as grdDetail

Set ItemSource = “{Binding Languages}”

Add 2 columns Language and Version

Bind it.


Code behind

Open MainPage.xaml.cs file

In side the Constructor create an object of EmployeeServiceClient

Add a handle to GetAllEmployeesCompleted

Call GetAllEmployeesAsync();

Set grdEmployee.DataContext = e.Result; in handler


That’s it.

Now run the application and click any row it will display one more grid which contains the details of that record.


Link to Download the Code