In this example I will show you how to populate a RadTreeView using LINQ and WCF. Also you will see how to transform a flat data into a hierarchical one.
The target result is:
1. Create a new Silverlight Web Application Project
NOTE: Make sure you choose "Web Application Project"
After the project loads you can see that besides the regular Silverlight application, Visual Studio adds a Web application that will host the .xap file.
Before writing any LINQ or creating any WCF service, we need a database to target.
2. Right-click on RadTreeViewWithWCFWeb project and add a new item - "SQL Server Database". You can give the database any name you wish. I personally called mine TVSeries since this is going to be a TV related tutorial :).
Visual Studio will ask you whether you want to place the database in the App_Data folder. Click Yes to confirm.
Examine the RadTreeViewWithWCFWeb's App_Data folder and you will find your database there.
3. Double-clicking the TVSeries.mdf file will automatically send the database to the "Server Explorer" window.
It is now time to populate the database with some data. To keep the tutorial short, I will add only one table and fill it with data. I have called my table FoxTVSeries. You can download the database here.
Since the database is populated, it is time to do LINQ on it.
4. Right-click on RadTreeViewWithWCFWeb project and add a new item - "LINQ to SQL Classes".
5. Open the "Server Explorer" window and drag the FoxTVSeries table onto the "Object Relational Designer". ("Object Relational Designer" opens automatically when you open the DataClasses1.dbml file)
The "Object Relational Designer" will automatically show the columns that the table has.
6. By default, the LINQ class is not serializable. In order to use the table in a web service, we need to make the DataClasse1.dbml file serializable. Right-click on the design surface and choose Properties from the drop-down. In the properties window change the "Serialization Mode" to Unidirectional.
7. The LINQ is done, it is time now to create the web service. Again, right-click on RadTreeViewWithWCFWeb project and add a new item - "WCF Service".
Visual Studio adds 3 files that hold the service contract for the WCF service - IService1.cs, Service1.svc and a code-behind to it - Service1.svc.cs.
8. Open the first file - IService1.cs. This file contains the operation contract. Change the name and the signature of the DoWork() method - change its name to GetTVSerie and change its return value to be List<FoxTVSery>.
9. Go to the Service1.svc.cs file and implement the IService1 interface
10. Keeping the example as simple as possible, we will select all the the items in the table, without any grouping, ordering etc.
11. One thing that is important is to make sure that your web service uses a basicHttpBinding, not the default wsHttpBinding. Go to the Web.config file and scroll down until you find the system.serviceModel tag. Change the binding="wsHttpBinding" to binding="basicHttpBinding".
The reason to change the binding is because Silverlight supports only basic binding (SOAP 1.1 etc.).
Congrats, the web service is all set! The next step is to use the web service in the Silverlight application.
12. Go to the RadTreeViewWithWCF project, right-click on References and add a "Service Reference".
A popup window appears hit the Discover button to find the web service and then hit OK to add it.
13. Once you have the WCF Service added, it is time work a little on the XAML and actually add the TreeView. First of all add references to Telerik.Windows.Controls.dll and Telerik.Windows.Controls.Navigation.dll.
14. Open the Page.xaml file and reference the previously added dlls. Also you need to reference the RadTreeViewWithWCF project.
15. In the UserControl.Resources of Page.xaml we have to create a hierarchical data template that will be used as an item template for the TreeView. Also we create the data source for the TreeView
16. Next step is to create the TreeView and apply the item template and the data source.
17. If you decide to build, Visual Studio will encounter an error at the line
3: <local:HierarchicalDataSource x:Key="Source" />
18. In the RadTreeViewWithWCF project add a new class called HierarchicalDataSource.cs. Make this class inherit from ObservableCollection<TableItem>.
Try to build and you will get an error telling you that you are missing the TableItem class. Therefore we need to create the TableItem class. This class is going to represent a single entry from the FoxTVSeries table. This means that this class is going to have properties like NodeID, ParentID, NodeText and one additional property called Children. The Children property will be used to turn the flat data into hierarchical one.
Once the TableItem class is done, we are ready to proceed with the HierarchicalDataSource class.
It is a pretty straightforward class. It has a list that will contain the flat data coming from the web service result. Then this list is traversed and the hierarchical data is built.
If you need any more explanations or you have any suggestions, do not hesitate to drop me a comment.
Subscribe to be the first to get our expert-written articles and tutorials for developers!