Code Simplified – Viral Sarvaiya

Code Simplified – Viral Sarvaiya, Web Developer Friends, dot net Developer, Sql Server Developer

Bind Silverlight Grid view with WCF Service

Posted by Viral Sarvaiya on September 17, 2010

Hello friends….

Here I demonstrate how to bind the grid view of the Silverlight with WCF Service.

You already know what is the Silverlight and WCF. My one post that demonstrate the use of the WCF Service with Silverlight, for more info about that check

Setp 1 : Create New Silverlight Project( here I give name of the project is “SilverlightGridTest”)

In the Visual Studio 2008 or 2010, file menu -> New -> project.

Select Silverlight application, give name as SilverlightGridTest and open the project.

Then check the checkbox true of the host the Silverlight application in web site.

Now you have 2 project in the solution.

Step 2: Database information


Name VARCHAR(256),

Phone VARCHAR(50),

City VARCHAR(50)


make one procedure named “GetAllPersonInfo” and write the following Statement in the procedure

Select *from person order by name;

Step 3: Create WCF Service

Right click to SilverlightGridTest.web project, select add -> new item.

Choose Silverlight in left panel and choose Silverlight-enable WCF Service. Then give name “DataService.svc”

So Service has been added to project.

Here we have interface IDataService.cs and DataService will implements that so in our IDataService.cs code is as below.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.Text;

namespace SilverlightGridTest.Web



public interface IDataService



PersonDetails GetPersonDetails();



public class PersonDetails


List<Personinfo> _PersonList = new List<Personinfo>();


public List<Personinfo> PersonIndex


get { return _PersonList; }

set { _PersonList = value; }




public class Personinfo



public string Name { get; set; }


public string Phone { get; set; }


public string City { get; set; }



In the “DataService.svc.cs” file write the following.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.Text;

using System.Data;

namespace SilverlightGridTest.Web


public class DataService : IDataService


public PersonDetails GetPersonDetails()


DatabaseHandler dbObj = new DatabaseHandler();

DataTable dataTablePersonInfo = dbObj.GetPersonInfo();

PersonDetails PersonDataMessage = new PersonDetails();

for (int iTagCounter = 0; iTagCounter < dataTablePersonInfo.Rows.Count; iTagCounter++)


Personinfo PersonInfo = new Personinfo();

PersonInfo.Name = dataTablePersonInfo.Rows[iTagCounter]["Name"].ToString();

PersonInfo.Phone = dataTablePersonInfo.Rows[iTagCounter]["Phone"].ToString();

PersonInfo.City = dataTablePersonInfo.Rows[iTagCounter]["City"].ToString();



return PersonDataMessage;




Now add the new class name “DatabaseHandler.cs” for the operation on the database. Means this function will get the data from the database.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

using System.Collections.ObjectModel;

namespace SilverlightGridTest.Web


public class DatabaseHandler


private string _gConnectionString = ConfigurationManager.ConnectionStrings["Database"].ToString();

public DataTable GetPersonInfo()


SqlConnection sqlConnect = new SqlConnection(_gConnectionString);


DataTable dbTbl = new DataTable();

//Get data

SqlCommand cmd = new SqlCommand();

cmd.CommandText = "GetAllPersonInfo";

cmd.Connection = sqlConnect;

cmd.CommandType = CommandType.StoredProcedure;

SqlDataAdapter oAdapter = new SqlDataAdapter(cmd);



return dbTbl;




Step 4: Web.Config Settings

Database Connection string


<add connectionString="packet size=4096;server=ServerName;persist security info=False;database=DatabaseName;uid=UserName;pwd=Password;" />


Service Settings





<serviceMetadata httpGetEnabled="true" />

<serviceDebug includeExceptionDetailInFaults="false" />







<binaryMessageEncoding />

<httpTransport />




<serviceHostingEnvironment multipleSiteBindingsEnabled="true" />


<service behaviorConfiguration="SilverlightGridTest.Web.TestServiceBehavior" name="SilverlightGridTest.Web.DataService">

<endpoint address="" binding="basicHttpBinding" contract="SilverlightGridTest.Web.IDataService" />

<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />




Step 5: Add clientaccesspolicy.xml and crossDomain.xml file.

This will complete the coding in the SilverlightGridTest.Web .

Build the application.

Now move to SilverlightGridTest.

Add the service reference and add the service which we develop above.

Step 6: Mainpage.xaml file.

Now in the Mainpage.xaml file put the grid control.

<UserControl x:Class="SilverlightGridTest.MainPage"








d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top">

<sdk:DataGrid x:Name="AllPerson" GridLinesVisibility="All" AutoGenerateColumns="False" >


<sdk:DataGridTextColumn Binding="{Binding Name}" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Header="Name" />

<sdk:DataGridTextColumn  Binding="{Binding Phone}" CanUserReorder="True" CanUserResize="True" CanUserSort="True"  Header="Phone"/>

<sdk:DataGridTextColumn  Binding="{Binding City}" CanUserReorder="True" CanUserResize="True" CanUserSort="True"  Header="City"/>





Step 7 : Mainpage.xaml.cs file

Make the object of the service client, coding as follow.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using SilverlightGridTest.DataService;

namespace SilverlightGridTest


public partial class MainPage : UserControl


public DataServiceClient objDataService;

public MainPage()



objDataService = new DataServiceClient();

objDataService.GetPersonDetailsCompleted += new EventHandler<GetPersonDetailsCompletedEventArgs>(objDataService_GetPersonDetailsCompleted);



void objDataService_GetPersonDetailsCompleted(object sender, GetPersonDetailsCompletedEventArgs e)


AllPerson.ItemsSource = e.Result.PersonIndex;




Step 8: Run the application.

You will get the data will display in the grid as below

Enjoy coding…..


14 Responses to “Bind Silverlight Grid view with WCF Service”

  1. […] This post was mentioned on Twitter by Larry King, Viral Sarvaiya. Viral Sarvaiya said: Bind Silverlight Grid view with WCF Service – […]

  2. Hi Viral,

    Really Good One.

    Keep it Up Dear.

    Kind Regards,

    Rushit SHukla

  3. good one..

  4. Anil Maurya said

    very nice code for starting with databinding.

  5. anil2711 said

    very nice desription..keep it up

  6. […] […]

  7. […] Posts Difference between ExecuteQuery And Execute NonQueryGridview – insert, update, deleteBind Silverlight Grid view with WCF ServiceUse of WCF Service in SilverlightSQL Server: Return Multiple Values from a FunctionBackground Image […]

  8. Hi nice posting. I really agree the majority of these ideas

  9. ranjithkumar said

    How can i bind data for dynamic columns..i.e autogenerate =true means what can i do…

  10. pegazuss said

    Your code is very good.I looking for some idea how can i do,that grid refres auto when somthing change in the databae,wich attached the grid.So,i dont want to put timer or something like that the code to refresh the page.Can you help me?

  11. nandananatarajan said

    From above description objDataService.GetPersonDetailsCompleted += new EventHandler(objDataService_GetPersonDetailsCompleted); is not working can you give me the suggestion

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: