Using Telerik Silverlight controls in Sitefinity

Here are few guide lines on how to wrap Telerik's Silverlight controls so they can be used in Sitefinity.

In this example I will use the RadCube and the GridView Silverlight controls.

How to:

1. Make sure you have installed Telerik's Silverlight controls and Visual Studio Silverlight Tools.

2. Open a Sitefinity project. Right-Click in the Solution and choose - "Add new Item".

From the items list choose - "Silverlight Application" . I will name the new Silverlight project - "SiApp".

Visual Studio creates the project and adds automatically a two simple pages one .ascx and one .html where the new control is referenced.

3. Create the new Silverlight control layout.

Open the Page.xaml file. Drag&Drop Telerik's RadCube control and set x:Name attribute. Drag&Drop Telerik's RadGridView control within the RadCube and set x:Name attribute and ItemsSource="{Binding}". When this is done your control should look like this:

 

Now just save and leave it for now.

4. At this step I will create a simple WebService within Sitefinity that will be used by the Silverlight application to fill the GridView with items.

Right-Click Solution, choose "Add New Item" then select "Web Service", I will name it "GetItemsService.asmx" . In this example I will use Sitefinity's News Module from which I will take the data from. So create a simple Web Method within the service to retrieve the data. Here is how the "GetItemsService" code looks like:

Now you will need to reference the GetItemsService.asmx  from the Silverlight Application. Right-Click References folder of your Silverlight App., choose Add Service Reference, next click the "Discover" button - this will populate the list to the left with all the services contained within the Solution , now choose GetItemsService.asmx and save.

5. Setup Silverlight controls and bind the GridView

Open the Page.xaml code-behind file. In this example I will create two simple methods the first will bind the GridView the second will resize the RadCube. Please have in mind that Silverlight controls are ran on the client machine so it is not possible to control them directly with server side code. The work-around for this is to use JavaScript and hidden fields to call methods and pass values.

A Silverlight control's methods can be called directly from JavaScript functions. In order to do that first make a reference in the Silverlight control to System.Windows.Browser from this point on you can use [ScriptableType] and [ScriptableMember] attributes to expose the class and its members to the JavaScript code. Once this is done you will need "HtmlPage.RegisterScriptableObject" method to add the members to the JavaScript object. Here I have created such a class:

 

The "SetCubeSize" is used to resize the RadCube and the "BindCall" calls the web service that we previously created and bind the return collection to the GridView.

6. Creating the ASP control that will wrap the newly created Silverlight control.

Right-Click the Solution, choose "Add New Item", select "Web User Control" and save.

Reference the System.Web.Silverlight assembly:

 

Reference the newly created Silverlight control:

 

Add 3 hidden fields that will be used to pass values from the server to the Silverlight control:

 

 Now I wrote a simple JavaScript function that will be called when the Silverlight control is done loading:

 

 As you can see I call directly the "BindCall" and "SetCubeSize" methods. This is the simplest way of calling methods within a Silverlight control.

So this is how the .ascx control should look like:

 

 

Now to expose those hidden fields as properties.

Open the .ascx code-behind file and just expose them like this:

 

 

7. Just upload the .ascx control in Sitefinity.

 

This is just an example on how to use Silverlight controls in more efficient way in Sitefinity, of course many other properties can be exposed to make it even more flexible but this example just shows a simple way to do that.