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!

image_thumb.png

New UI Controls as part of Telerik DevCraft Q3 2012 Release

On Oct 17 2012, we did a release of our Telerik DevCraft bundle known as Q3 2012 release. As part of the release our UI suites have got couple of new controls added to the bundle. In this blog post we will look at what new controls have been added to our UI suites namely – RadControls for ASP.NET AJAX, RadControls for Silverlight, RadControls for WPF, RadControls for WinForms, Windows 8 Controls and RadControls for Windows Phone. So lets go over them one by one.


RadControls for ASP.NET AJAX:

ASP.NET AJAX suite gets the following new controls added to the family of already existing 70+ controls. They are:

Gauge:

This is a high performing HTML5 based radial and linear gauge control which can be used to show certain values in a scale.

 

See demos of Gauge control here

PivotGrid (Beta):

PivotGrid is a control used to show pivoted data in a tabular or outline or in a compact layout. We bring the power of Pivot to Web with the introduction of this control. This control supports aggregates, drag and drop and a field list control panel.

See demos of PivotGrid here.

AutoCompleteBox:

As the name goes – this is a auto completion textbox. It auto suggests filtered list with options based on user input and supports multiple item selection. This was one of the highly requested control for ASP.NET AJAX

See demos of AutoCompleteBox here.

You can download a free trial of RadControls for ASP.NET AJAX and evaluate the controls for your needs.

image


RadControls for SilverLight:

Four new controls got added to the Silverlight controls family. They are:

PivotGrid (Beta):

RadPivotGrid is released as a Beta control in this release. This supports data summarizations and great data visualization capabilities.

image

See demos of RadPivotGrid here.

GanttView:

GanttView is a control designed for managing and visualizing complex planning data and tasks. Often used in project planning and management scenarios. Using this control it is easier to understand and analyze the data.

image

See demos of GanttView here.

AutoCompleteBox:

No need to explain this control. The auto suggestion control is now available in Silverlight suite also.

image

See demos of AutoCompleteBox here.

HeatMap:

HeatMap is a control which is matrix-like control, which uses color to encode the values along two axes.

image

See demos of RadHeatMap here.

Download free trial of RadControls for Silverlight and evaluate them for your needs.

image


RadControls for WPF:

New controls introduced for WPF suite are as follows:

PivotGrid (Beta):

image

GanttView:

image

AutoCompleteBox:

image

HeatMap:

image

Download free trial of RadControls for WPF and evaluate them for your projects.

image


RadControls for WinForms:

There was one control added to the WinForms family. That is RadPivitGrid and released as a Beta control in this release.

PivotGrid Filtering

You can download thirty day free trial of RadControls for WinForms with dedicated support during trial period.

image


RadControls for Windows Phone:

Five new controls got added to the Windows Phone controls family. They are as follows:

TimeSpanPicker:

TimeSpanPicker control provides full control over time and duration in any app where users set duration. This control allows users to define duration of certain action.

TimeSpanPicker

Expander:

Expander control allows users to expand or collapse conversations. Fits well in applications that rely on interaction and messaging.

Expander Control

PasswordBox:

As the name goes this is a ready made password input text box for Windows Phone scenario. Using this control in a registration form will automatically display the typical dots in place of the actual password being typed.

PasswordBox

DataForm:

DataForm control provides with out of the box data forms that can be simply configured to work with business logic of your application. It also provides out of the box validation, styling and other customization mechanisms.

DataForm

InputPrompt:

This control allows you to create prompts where you can ask users to enter important details such as Phone number, email, etc.

InputPrompt

You can download a free trial of RadControls for Windows Phone to evaluate the controls.

image


RadControls for Windows 8:

This is a brand new suite as far as the RadControls family is concerned. This suite contains some of the controls which are not found in the SDK of Windows 8 development like date and time pickers. These controls have been built from ground up and provide you with the same UI and UX as that of Windows 8 look and feel. Currently following 15+ controls are released and many more will be added to the suite over time. At this moment we are offering this suite at an introductory price of $99 and you will receive all the new components and updates that will be added to the suite in the next year.

image

image


Hope this blog post excites you in terms of the new control offerings from our UI control suites. If you feel like trying out them go ahead and download our free 20 day trials and evaluate them. Note that during the trial period you will get dedicated support meaning you can raise support tickets and a dedicated support team will be responding to you. Give it a try and let us know how you feel about our UI controls.

Till next time, Happy Coding.

image.png

RadControls for Web – New controls in Q2 release

We at Telerik shipped our second release of the year which we call it as Q2 release, in June 2012. In this post we will look at what are the new controls available under RadControls for Web which includes ASP.NET AJAX, ASP.NET MVC and Silverlight.

RadControls for Web consists of the following suites:

  • RadControls for ASP.NET AJAX
  • RadControls for ASP.NET MVC
  • RadControls for Silverlight

So lets look at new controls added in Q2 release one by one.


RadControls for ASP.NET AJAX:

This suite is a complete ASP.NET AJAX development toolset. RadControls for ASP.NET AJAX contains over 70 controls and helps in rapid component based UI development. In Q2 2012 release we have added 3 new controls. They are:

  • HTML5 Chart
  • BarCode
  • ODataDataSource

image

HTML Chart:

HTML5 Chart

HTML5 Chart control also known as RadHtmlChart provides a powerful charting mechanism. The charts are based on SVG format for modern browsers and VML for older browsers. Here are some of the salient features of HTML5 Chart control:

  • Client Side Rendering – Rendered entirely through JavaScript and hence reduces the amount of work to be done by Server. Only serialized data is sent to the client which boosts the performance of the application.
  • Control Data Loading – You have the full control over the data loading process. Load the data after page is loaded or invoke a callback via JavaScript.
  • Customize Appearance – The markup structure exposes all properties necessary to customize the appearance.

See Demos

Barcode:

Barcode control enables you to quickly and easily create industry standard barcode formats to your applications. Here again the barcode is generated in SVG format for modern browsers and VML format for older browsers.

See Demos

ODataDataSource:

ODataDataSource control enables you to codelessly bind your controls to OData Services.This control supports a Visual Studio design time wizard to query any Odata service supporting JSON and XML. So you can visualize the data even before you binding it. As said earlier this allows you to codelessly bind the odata services to controls like TreeView, Grid etc,

See Demos

 


RadControls for ASP.NET MVC:

With Q2 release we no longer promote the ASP.NET MVC extensions, rather we advice you to migrate to our new breed of UI framework known as Kendo UI which composes of Web, DataVisualization and Mobile contols. Kendo UI is the new platform for HTML5/JavaScript development. Kendo UI Web controls also comes with server side wrappers for ASP.NET MVC for easier development. You can know more about Kendo UI at www.kendoui.com.

In Q2 release 1 new widget was added to Kendo UI Web suite.

DateTimePicker:

As the name goes this is a UI widget which allows you to select Date as well as time within in one single widget/control. If your scenario requires for a Date and Time to be shown, this control can be used instead of two controls – one to show Date and another to show Time.

image image

See Demos


RadControls for Silverlight:

This suite is one of the industry’s leading suite of Silverlight controls for today’s Line Of Business (LOB) application development. RadControls for Silverlight helps you to create engaging and interactive user experiences for Web and Desktop. This suite contains over 65 controls which will surely cut your development time.

In Q2 release, there were 2 new controls added to the suite. They are:

  • RadHeatMap
  • RadGanttView

RadHeatMap:

Heat Map control is a matrix like control that uses color to encode values along two axes. Some of the features of this controls are:

  • Interactive tool tips – provides context aware detail on the heat map
  • Colorizers – allows you to use different colors to encode values
  • Super fast rendering – uses immediate mode bitmap based rendering and proprietary hit-testing and lay outing to render vast amount of visual detail without slowing down and sacrificing the interactivity

HeatMap

See Demos

RadGanttView:

This control as the name goes, allows you to visualize and manage hierarchical project data as a Gantt Chart. This has the capability to visualize different types of project data such as Tasks, Milestones, Summaries, and also the relations between them. You can highlight different types of important items like late or critical tasks. Another feature of the control is the ability to import data from your MS project and visualize it in a friendly way.

image

See Demos

Summary:

In this post we looked at new controls released as part of the Q2 Release under RadControls for Web suite. We looked at 3 core technologies under Web i.e. ASP.NET AJAX, ASP.NET MVC and Silverlight – and looked at the new controls available under each of those suites, Hope you are excited to try these new controls yourselves. Don’t forget that all these controls suites are available for free 30 Day trial downloads.

image_thumb.png

RadControls for Web – And you ask why?


Overview:

In this post, we will quickly look at the factors that will compel you to consider Telerik RadControls as the framework for all your User Interface layers in your projects. So buckle up and let’s go for a ride with Telerik RadControls.



RadControls Defined:

Rad or RAD – stands for Rapid Application Development and RadControls are nothing but controls which help you in Rapid Application Development. Telerik offers over 10 years of aggressive development which includes a set course of 3 releases per year & the Service Packs, has been able to come out with industry leading UI component suite for Microsoft ASP.NET technology which includes AJAX, MVC and Silverlight. There are nearly 175+ controls under the combined umbrella of   AJAX, MVC and Silverlight. The controls themselves, enhance the framework provided controls with a lot of out of the box features. For e.g. If you consider the RadGridView we complement the framework Grid with features such as Filtering, Grouping, Sorting, Paging and export capability. Imagine if you had the onus of writing the paging and export all by yourself. I have been a programmer for close to a decade and I would say it will be like reinventing the wheel. So, with RadControls you just have to worry about your business need and the control complements your requirement with out of the box features.

image     Telerik Extensions for ASP.NET MVC   image


RadControls Decision Factors:

Having known about RadControls and what they are, next question will be – Why should you choose RadControls? Lets quickly run through some of the check list before you decide:

  • You want to develop a professional web application.
  • You want to deliver your application fast to the Client/Market.
  • You want to build apps which adhere to certain standards like Accessibility standards.
  • You want to meet your deadlines and budgets.
  • You want to cut down your development cost and development time.
  • You want to rapidly provide custom software for ever changing needs of clients.
  • You want to quickly create working prototypes.

If you have answered Yes to the above checklist – then – RadControls is what you need. RadControls will help you to achieve all of the above mentioned points in the check list. So I highly recommend you to download a trial and test drive the following RadControls:


RadControls and Developers:

Developer friendliness is one of the important factors for any UI component vendor. Keeping the developers in mind helps Telerik adopt the highest degree of friendliness when it comes to the UI controls. There are three main factors which we think makes a developers life easy when working with our RadControls. They are:

  • Visual Studio Integration – All our suites extend Visual Studio by integrating seamlessly with the Visual Studio toolbox. This allows developers to use the controls quickly by simply dragging and dropping on the working area. Currently we have support for Visual Studio 2012 as well.

 

  • Design Time Wizards – When working with the controls in design time, RadControls provide wizard interfaces on all controls to easily configure the features you need.

 

 

  • Familiarity – Whole of the RadControls framework mirrors the Microsoft .NET framework. So as a developer if you understand the .NET framework, RadControls is no different. So the learning curve is very minimal and you will be able to get on with it in a jiffy.

 


RadControls and Themes:

One of the deciding factors we looked at earlier was that of developing a professional looking web application. What we needed to make our application look like a professional app is style sheets. Be it Web app or Silverlight app, styles play a pivotal role in the look and feel of any User Interface. Most of the developers are not designers – which includes me too :). So the RadControls suite comes to the rescue by way of packaging what we call as Themes i.e. a complete style sheet which adheres to one common color scheme across the controls. The Telerik RadControls suite comes bundled with close to 25+ themes under the combined umbrella of ASP.NET AJAX, MVC and Silverlight. So out of the box we ship 25+ themes to use in your production level application. If that is not enough you can always create your own theme and embed the same in your application. ASP.NET AJAX and MVC suites provide a Visual Theme Builder which can be used to create your custom themes. Here are the links for Visual Theme Builder:


Summary:

Telerik RadControls for Web provides a lot of benefit to enterprises in not only speeding up the development life-cycle but also cuts down on the cost and time of development. It also is developer friendly with seamless Visual Studio integration and design time wizard to help code faster. As said in the previous sections, there are nearly 175+ controls to play around in the area of AJAX, MVC and Silverlight. If that doesn’t excite you then I don’t know what will :). Download the 30 day trial we have and give it a try. I bet you will fall in love with the RadControls.

Till next time – Happy Coding !!!