Nested DataGrid using Silverlight 4 and WCF

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 http://mscoder.wordpress.com/2010/07/11/datagrid-binding-and-crud-operations-in-silverlight-4-using-wcf-service/.

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 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

Data Pager For Beginners

DataPager Silverlight Control for Beginners

It was a long time when I have post on silverlight data grid control, at that time I was thinking of posting complete series of the post on the data grid control I have posted on the data grid grouping control but I didn't post on the paging of the data grid records. Now after long time I have time to see the silverlight and its paging control, I know there are lot of tutorial regarding data pager control But I have this for the absolute beginner who are just started their journey of the Silverlight.

For this example I have two controls added in my xaml are one is the data grid control and the second one is the data pager control.

You can see the code for the data grid control and the data pager control in the List 1, Here you can see that I have set the properties of the data grid control like auto generate columns to false mean I will set the columns for the data grid control, IsReadOnly is set to false mean this grid is used for the display of data and the vertical and horizontal grid line brush and GridLinesVisibility is set to All to show both the horizontal and vertical lines.

<sdk:DataGrid Grid.Column="1" Grid.Row="1" AutoGenerateColumns="False"  IsReadOnly="True" GridLinesVisibility="All" HorizontalGridLinesBrush="{StaticResource Brush_BorderOuter}"  VerticalGridLinesBrush="{StaticResource Brush_BorderOuter}" x:Name="dgrdDataGrid" VerticalAlignment="Top" Height="296">

   <sdk:DataGrid.Columns>

        <sdk:DataGridTextColumn Binding="{Binding UserID}" Header="User ID"/>

        <sdk:DataGridTextColumn Binding="{Binding FirstName}" Header="First Name"/>

        <sdk:DataGridTextColumn Binding="{Binding LastName}" Header="Last Name"/>

        <sdk:DataGridTextColumn Binding="{Binding EmailID}" Header="Email"/>

        <sdk:DataGridTextColumn Binding="{Binding ContactNumber}" Header="Contact No."/>