If you want to know the features of Silverlight 3 datagrid and how to setup datagrid control in Silverlight application, here is my previous link.
Here I will walk through
- how you can get data from SQL Server database and bind it to Silverlight Datagrid
- how you can update, delete records in Silverlight 3 DataGrid using WCF Service
1) Create Silverlight Application and Setup DataGrid
Here is my previous link that walks you through how you can do that.
2) Get, Update and Delete in Silverlight DataGrid using WCF Service
There is no System.Data namespace available in Silverlight application so you can’t connect to ADO.NET enabled database to get the data and bind directly to Silverlight DataGrid. Since we are missing System.Data namespace, DataSet / DataTable that mainly used by developer to bind data also NOT available.
But there are three different approach available to bind data centric application in Silverlight now. Here is the link that explains those three diiferent approach. Here I will create WCF Service one of three approach available.
This WCF Service will be main communication point from Silverlight Application. To update/get data from database, we will LINQ to SQL class. To know more about LINQ to SQL, you can refer MSDN article here.
Adding LINQ to SQL Class
To add LINQ to SQL Class file, right click on silverlight web project and add new item and choose LINQ to SQL Classes template.
Once you click on Add it will open DataClasses.dbml (object relational designer) file. Now click on “Server Explorer” link. It will open “Server Explorer” window where you can establish your sql server database connection. For our sample application, I have created pub database and within that database I have created Members table. To create a supported database and table, I have included SQL Script in the source so run the sql script before moving forward because we need to have those database and table created while working with LINQ to SQL class.
Now establish the pub database connection from “Server Explorer” window. Now drag and drop Members table to DataClasses.dbml file.
It will generate Members LINQ Class corresponding to Members table we have in pub database. By default this class in not serializable and we will pass list of members object to silverlight application through WCF Service, so we need that class to be serializable. To do that, click on empty area on DataClasses.dbml file and right click -> properties, it will open property window for entire class. You will see serialization mode property and change it to Unidirectional.
Adding WCF Service
To add WCF Service, right click on Silverlight web project and click on Add New Item and choose WCF Service template.
It will create IDataService.cs service contract and DataService.svc WCF Service file. If you are not familiar with WCF Service, you can find out more about WCF here.
Now open IDataService.cs file. There will be dummy contract “DoWork()” created in service contract file. Replace that DoWork() contract with the contract method “GetMembers” that we need to get the list of members object and also change the return type void to List<Member>. When you try to change return type, you will see Member class in intellisense window that’s LINQ to SQL Class created and associated to Members table in pub database.
So we changed the service contract “DoWork()” to “GetMembers()”. Now open DataService.svc.cs file. You will see that DataService class in that file implements IDataService service contract that we just modified. Since we have modified dummy contract to the actual contract that we need, remove DoWork method from DataService.svc.cs file. We need to implement the “GetMembers()” service contract here. To do that, click on interface class IDataService name, you will the smart tag poped up so click on “Implement interface IDataService” it will create implementation of “GetMembers()” for you.(Easy to do that ah…. smart way… right?? I like that smart tag because I hate to type ) Now put the actual code in that method to get list of members using DataClassContext.
So we got GetMembers method ready to use. Now can you create UpdateMember method the same way we created GetMembers method?? It’s very straight forward.
DataService.svc.cs (updated on April 7, 2010 to fix bug in UpdateMember method)
So we have now ready GetMembers and UpdateMembers method to use. Only one thing is left to change for WCF service is that HttpBinding in web.config. WCF uses wsHttpBinding by default and since Silverlight only supports basic httpbinding so change we need to change binding in web.config.
Now build the solution to make sure all above steps went well.
Adding Reference in Silverlight Class Project
Right click on Silverlight Class library -> Add Service Reference. It will open Add Service Reference window now click on Discover button it will search for WCF Service within a solution and will list the service we created so far.
Click on the service that found and expand that tree you will see the GetMembers and UpdateMember operation in right box. Click Ok to add reference of those operations in Silverlight class library project.
Now it’s time to call those service operation (GetMembers and UpdateMember) from silverlight code behind file. To do so, open MainPage.xaml.cs file. Please make sure you have installed Silverlight 3.0 tools for Visual Studio 2008 SP1 the reason why I am saying that you will have BeginningEdit and RowEditEnded event in Silverlight 3.0. You won’t find RowEditEnded that is very useful event but was missing in Silverlight 2.0.
Now wire up BeginningEdit and RowEditEnded event of Silverlight datagrid in Code behind class constructor.
So now we have BeginningEdit and RowEditEnded event is ready to use.
Binding data to datagrid
Now let’s first bind the Silverlight datagrid. Since Silverlight application is running in browser, only way to call web service is asynchronously. To do so, first create a web service client object and then wire up GetMembersCompleted event that will be called when asynchronous GetMembers webservice call will be completed.
Now hit F5 to run the application and see what you got so far. You will see the data from Members table of pub database bound to datagrid. Here is the result
Updating row in Silverlight DataGrid
Now let’s add logic in dgSilverlight_RowEditEnded method that wrapped up dgSilverligh.RowEditEnded event to handle update logic. When you click on any column of datagrid, it will turn into editable textbox so you can modify the value. Once you change focus out of that row (yes out of the row not just column), dgSilverlight_RowEditEnded method will be fired and you can retrieve updated row value using e.Row.DataContext and cast it to Member LINQ to SQL Class. Then you can call UpdateMember service call asynchronously passing updated Member object.
Here it is how you can code that.
Now run the application and try updating any row. Bingo…. we are done with update.
Deleting row in Silverlight DataGrid
Any idea how you can accomplish delete operation in DataGrid??? I will give you guide how you can do that. You need to wire up OnKeyDown event and you can check if the delete key press and any datagrid item is selected, then you can delete that selected datagrid row. Can you do it yourself?? Try our self first and if you are running into any issue, here is the complete source code that will help you understanding. Here is live demo page.
Updated on 1/1/2011:
Here is my latest article where you can download latest Silverlight 4 DataGrid Example with Add, Update and Delete. If you have latest version of visual studio and silverlight installed, I would recommend you to go to my latest article to download latest code.
If you are interested to know about Silverlight PivotViewer control, check this my other article for step by step guide how to create Silverlight PivotViewer application.
Any question or problem running sample code please leave your comment here. If this post really helps you, please click the Google +1 button to show it really helps you save your time.