RadControls for Silverlight

Silverlight RadCartesianChart: Reading data from WCF Service

Overview:

As part of evangelism job I speak to a lot of customer and try to tell them how they can use our controls. Couple of days back I was speaking one customer who was evaluating our RadControls for Silverlight suite and in particular was working with RadCartesianChart control. He saw all our demos of RadCartesianChart we ship and said that they all provide data from the code behind and are static in nature. They were looking for examples which tell them how to consume data from a WCF service and provide it to RadCartesianChart. So this blog post is all about how do we provide data to ChartView from a WCF Service. So lets get started.

Create RadControls Silverlight Application:

First thing to do, is to create a new project of type RadControls Silverlight Application. I am using Visual Studio 2012 for the rest of this blog post. You can do this in VS2010 too. Open Visual Studio IDE and select File > New Project. In the New Project dialog select Telerik > Silverlight > C# RadControls Silverlight Application. Give a name for the project and click ok.

SNAGHTMLf99013 Fig 1. New Project Dialog

Next, Visual Studio will ask you whether to host the SL app in a new web site and what should be the SL version. I am opting SL Version 5 for the sake of the demo. Here is the screenshot of the dialog:

SNAGHTMLfc02a3

Fig 2. Silverlight Application Settings Dialog

Since we have selected RadControls Silverlight Application, next you will get a “Project Configuration Wizard” where you will select the Components you require in your project. Since I am only interested in Charting, I will select only Telerik.Windows.Controls.Charting and the wizard automatically selects the dependent components for me. Here is the screenshot of the dialog:

SNAGHTML100ba2f

Fig 3: Telerik Project Configuration Wizard – Silverlight Settings Dialog

Clicking next will take you to theme settings. I am selecting Windows8 theme that comes out of the box. Click finish to let Visual Studio create the project.

SNAGHTML1023d24

Fig 4: Telerik Project Configuration Wizard – Theme Settings Dialog

Once Visual Studio finishes creating the project, here is how the solution will look like:

image

Fig 5: Solution Explorer

You can see that we have 2 projects in the solution. One is the actual Silverlight app and another is the Web app which will host the Silverlight XAP. Next we look at how to create a WCF service.

Create WCF Service:

For the sake of the demo, I will be creating a WCF service which does the following things:

  • Create a ProductModel which will act as a DataContract. It will have ProductID, Name and Price as properties
  • Create a WCF Service which will connect to Northwind Database.
  • Have one Operation called GetTop10ProductsByPrice.  This will execute a simple query to fetch top 10 products price wise and convert that into list of ProductModel and return it to client

Product Model Class:

We will create the WCF service in Web App project. We App will host our service too. Create a new folder called “Model” and create the ProductModel class. Here is the code for the ProductModel class:

[DataContract]
public class ProductModel
{
private int productID;
[DataMember]
public int ProductID
{
get { return productID; }
set { productID = value; }
}

private string productName;
[DataMember]
public string ProductName
{
get { return productName; }
set { productName = value; }
}

private decimal price;
[DataMember]
public decimal Price
{
get { return price; }
set { price = value; }
}
}

Chart Data WCF Service:

First create a folder and name it as Services. Right click on Services folder and select Add > New Item. In Add New Item dialog, select Silverlight from installed templates and then Silverlight-enabled WCF Service. Lets name the service as ChartDataService.svc. Click Add to create the service.

SNAGHTML185ec2a
Fig 6: Add New Item dialog

Next, since we need to connect to Northwind database, add a connection string to Web.config in the Web project. I have named my connection string as “NorthwindConnection”.

Next, in the ChartDataService, remove the generated operation contact with name “DoWork”. Instead add a new Operation and lets call it “GetTop10ProductsByPrice”. In this function we will connect to Northwind Database using SQL Connection and execute a simple query. We will loop through the data reader and generate a list of ProductModel and return the list. Here is the code for GetTop10ProductsByPrice operation:

[OperationContract]
        public IList GetTop10Products()
        {
            string nwConn = ConfigurationManager.ConnectionStrings["NorthwindConnection"].ConnectionString;
            var prodList = new List();
            using (SqlConnection conn = new SqlConnection(nwConn))
            {
                const string sql = @"SELECT TOP 10 ProductID, ProductName, UnitPrice
                                     FROM Products
                                     ORDER BY UnitPrice DESC";
                conn.Open();
                using (SqlCommand cmd = new SqlCommand(sql, conn))
                {
                    SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                    if (dr != null)
                        while (dr.Read())
                        {
                            var cust = new ProductModel
                            {
                                ProductID = dr.GetInt32(0),
                                ProductName = dr.GetString(1),
                                Price = dr.GetDecimal(2)
                            };
                            prodList.Add(cust);
                        }
                    return prodList;
                }
            }
        }

Consuming WCF Service from Silverlight App:

Now that we have a service, next thing to do is to reference that service in our Silverlight application. Right click on Silverlight application and select “Add Service Reference”. In the Add Service Reference window, click on Discover button. The WCF Service we created in the previous section will be automatically discovered and will list down the operation it supports.

SNAGHTML125209f

Fig 7: Add Service Reference Dialog

Now click on the Advanced button located in the bottom left side of the dialog to open the service reference settings dialog. In the Service Reference Settings dialog, under Reuse types in referenced assemblies, select the System related assemblies and not the Telerik ones. Here is a screenshot of the dialog:

SNAGHTML1290d1f
Fig 8: Service Reference Settings Dialog

Clicking Ok will add a service reference in Silverlight app which can be invoked at runtime to fetch the data required for the chart.

Add RadCartesianChart Control:

Next we need to add the ChartView control on the screen. In order to do this, Open MainPage.xaml, identify the ChartView control from the toolbox, drag and drop it on to the MainPage.XAML. Give the chart a name. Here is the code to CartesianChart markup:

<telerik:RadCartesianChart Grid.Row="1" 
                            x:Name="chartView" 
                            Palette="Metro">
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis Title="Price (USD)"/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis Title="Products"/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries x:Name="barSeries1" 
                            ItemsSource="{Binding}" 
                            ValueBinding="Price" 
                            CategoryBinding="ProductName" 
                            ShowLabels="True" />
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

Lets take a closer look at the code. I first define the vertical axis and tell the chart that it’s a linear axis. I also set title to the vertical axis and call it “Price (USD)” because my vertical axis will hold the price of products. Next, I define horizontal axis and and tell the chart that it’s a Categorical axis. My horizontal axis will be used to represent the product itself, so setting the title of horizontal axis as “Products”. Now that we have finished setting the axis only thing left now is to create a series. So I define Series and create a BarSeries. I have given a name for the bar series and will use this name in code behind to perform data binding. We need to provide the data to the series – so lets set the ItemsSource to the Binding it will get at runtime. Now we need to tell what fields corresponds to the value of the series and what corresponds to the category axis of the series. Set ValueBinding to “Price” field and CategoryBining to “ProductName”.

Data Binding:

We defined the UI part of the chart. Now to provide data to the chart. We had add a service reference to our WCF service earlier. So we will have a client class created in the Silverlight project and will be known as ChartServiceClient. So we will use this client class to invoke the “GetTop10Products” operation. Here is the code to invoke the service and bind the data received to the chart view:

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
            ChartServiceClient client = new ChartServiceClient();
            client.GetTop10ProductsCompleted += client_GetTop10ProductsCompleted;
            client.GetTop10ProductsAsync();
}

void client_GetTop10ProductsCompleted(object sender, GetTop10ProductsCompletedEventArgs e)
{
            var data = e.Result;
            this.chartView.DataContext = data;
}

As you can see we invoke the operation asynchronously. When the operation completes we get the data and set it as the DataContext of the Chart. Run the application and when the page loads we should get the Chart as below:

image

As you can see we get our bar series graph which will show the price (in USD) on the vertical axis and products in the horizontal axis. We see the top 10 products by price.

Conclusion:

In this blog post, what I attempted was a very specific scenario which is most common on real world. As I said in the beginning, the customer I was talking to wanted to see an example of how to connect to a WCF Service, get data from the service and bind that data to Chart. So this blog posts outlines the steps required to make the chart work with WCF Service, Hope this is useful to many of you who may be having the same scenario. Do let me know your feedback if any.

Till next time – Happy Coding!

Consuming JSON based WCF REST Service in Kendo UI Mobile

In this post we will walkthrough on consuming WCF REST Service in Kendo UI Mobile. We may consider this post is divided in two parts. In part 1, we will see the way to create REST based WCF service and in part2 of this post we will consume that REST Service in Kendo UI mobile.

image

Creating WCF REST Service

If you are new to WCF and wondering how to create WCF REST Service .Please read many articles on WCF REST Service here .

To get it started quickly fire visual studio and create a new project. From WCF tab select WCF Service Application project template.

image

Delete all the codes generated from both the IService1.cs and Service1.svc.cs file.

Although in this post we are not going to fetch and data from database. We will return C sharp collection as data from WCF REST Service. However we can use any methodologies to create data model and expose data from data model as service. To make it simple we are going to work with following business object.


public class Bloggers
{
[DataMember]
public string BloggerID { get; set; }
[DataMember]
public string Name { get; set; }
[DataMember]
public string Technology { get; set; }

}

Define service as following


[ServiceContract]
 public interface IService1
 {

[OperationContract]
 [WebGet(UriTemplate = "/GetBloggers",
 ResponseFormat = WebMessageFormat.Json,
 RequestFormat = WebMessageFormat.Json)]
 List<Bloggers> GetBloggers();

 }

If you notice we have explicitly set the Request and Response message format as Json. Service is implemented as following. There is not much fancy about the service implementation, it is simply creating collection of business object and returning.


using System.Collections.Generic;

namespace RESTServiceForKendo
{

 public class Service1 : IService1
 {

public List<Bloggers> GetBloggers()
 {
 List<Bloggers> lstBloggers = new List<Bloggers>()
 {
 new Bloggers { BloggerID = "1", Name= "Jesse Liberty ", Technology = "XAML"},
 new Bloggers { BloggerID = "2" , Name = "Michael Crump" , Technology = "XAML"},
 new Bloggers { BloggerID = "3" , Name = "Chris Eargel" , Technology = "C Sharp"},
 new Bloggers { BloggerID = "4" , Name = "Chris Sells" , Technology = "All"},
 new Bloggers { BloggerID = "5" , Name = "John Bristowe" , Technology = "Web"},
 new Bloggers { BloggerID = "6" , Name = "Todd Anglin " , Technology = "KendoUI"},
 new Bloggers { BloggerID = "7", Name= "John Papa ", Technology = "XAML"},
 new Bloggers { BloggerID = "8" , Name = "Glen Block" , Technology = "REST"},
 new Bloggers { BloggerID = "9" , Name = "Lohith " , Technology = "Telerik"},
 new Bloggers { BloggerID = "10" , Name = "Scott Hanselman " , Technology = "All"},
 new Bloggers { BloggerID = "11" , Name = "Debugmode" , Technology = "Kendo"},
 new Bloggers { BloggerID = "12" , Name = "Pinal Dave " , Technology = "SQL Server"},
 new Bloggers { BloggerID = "12" , Name = "Julie Lerman" , Technology = "Entity Framework"}

 };
 return lstBloggers;
 }
 }
}

Next we need to configure Endpoint. Rather than creating Endpoint we are going to use factory class. Class System.ServiceModel.Activation.WebServiceHostFactory enables REST Endpoint on WCF Service. To set factory class right click on Service1.svc and click on view markup. In markup add factory class as following.

image

After configuring factory class we are all set with WCF REST Service. To test the service, run the service in browser. We should be getting Bloggers information as JSON data in browser.

image

Once you get data in browser (if you are using IE then you will be prompted to save returned data), we are all set to consume this data in Kendo UI Mobile.

Consuming in Kendo UI Mobile

We will consume JSON data from WCF REST service step. If you are using Visual Studio for Kendo UI development then you may find below post useful

Setting Development Environment in Visual Studio 2010 using NuGet for KendoUI

To proceed with follow the following steps

Step 1

Very first add the required references to work with Kendo UI Mobile. You need to add reference in head section of the page.

<head>
 <title></title>
 <meta charset="utf-8" />
 <script src="kendo/js/jquery.min.js"></script>
 <script src="kendo/js/kendo.mobile.min.js"></script>
 <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

</head>

After adding references we need to initialize the mobile. To do this adds below script just before the closing body tag.


<script>
 var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "pageLayOut" });
 </script>
</body>

You can see that layout and transition has been set. We will create layout in next step.

Step 2

After adding reference we need to create layout of the application. In layout we want two buttons in bottom tabstrip and a back button on the top. Layout can be created as following


&nbsp;
<div data-role="layout" data-id="pageLayOut">
 <header data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">Back</a>
 <span data-role="view-title"></span>
 </div>
 </header>
 <div data-role="footer">
 <div data-role="tabstrip">

<a href="#homeView" data-icon="home">Home</a>
 <a href="#bloggerView" data-icon="action">Bloggers</a>

</div>
 </div>
 </div>

Step 3

Next we need to create different views. As you notice from layout that we need to create two views. One is homeView and other bloggerView. In homeView we will display a message.

homeView is as following


<div data-role="view" id="homeView" id="homeView" data-title="Bloggers">

<h1>Welcome!</h1>
 <p>
 In this App we will fetch Bloggers information from WCF REST Service
 </p>
 </div>

Step 4

Now we need to create bloggerView. In this view we will put a Kendo UI Mobile ListView control. All the data returned from service will be bind to this ListView.

<div data-role="view" id="bloggerView" data-title="Bloggers" data-show="showBloggers">

 <ul id="bloggerList"
 data-source="bloggersData"
 data-endlessScroll="true"
 data-template="bloggersTemplate"
 data-role="listview"
 data-style="inset">
 </ul>
 </div>

There are couples of important points worth discussing about above code. In above listview we are setting data-source and data-template as following

clip_image001

So we need to

  • Create data-source bloggersData from the returned JSON data from the WCF REST Service (step5)
  • Create data-template bloggersTemplate (step4)

Step 4

Data Template allows us to render data as we want. It is used to format the displaying of data. A template can be created as following. We are creating a Kendo UI list view link button and displaying Name and Technology of the blogger. Id of this template is set as data-template property of list bloggerList.

<script id="bloggersTemplate" type="text/x-kendo-template">

 <a href="\#BloggerDetailsView" class="km-listview-link" data-role="listview-link">
 <h2>#=data.Name#</h2>
 <h4>#=data.Technology#</h4>
 </a>

 </script>

Step 5

Now we need to create datasource. We are going to create Kendo UI DataSource reading JSON data from the service.

clip_image002

In Kendo UI DataSource configuration, read attribute has been set to the URL of the WCF REST Service. Since service is retuning JSON data hence Accept type is as application/json.

Finally in data-show method of view we will fetch data from the DataSource. If you notice data-show attribute of bloggerView is set to showBloggers.

clip_image003

Putting all the discussion together DataSource can be created and data from that can be fetched as shown in below code

 var bloggersData;

bloggersData = new kendo.data.DataSource(
 {
 transport: {
 read: {
 url: "http://localhost:56863/Service1.svc/getBloggers",

data: {
 Accept: "application/json"
 }
 }
 }

});

function showBloggers(e) {
 bloggersData.fetch();

Now we are all set to run the application. On running we should be getting Bloggers data as following

Home View

clip_image001[6]

Blogger View

clip_image002

In this way you can consumed a JSON based WCF REST Service in Kendo UI mobile. I hope you find this post useful. Thanks for reading.