Telerik Silverlight Controls in ASP.Net web application

[Nirav]

Hello,

I am new to silverlight....my requirements are for the fancy charts/gauges available in the telerik silverlight rad controls product.  The problem is that I need to implement these silverlight charts/gages into an existing asp.net page.

I have to bind the data from a sql database to a chart and gauge in the existing asp.net web pages.

Can anyone provide me some ideas or any demo application?

It will be a great favor.

Thanks,
Nirav

[Petar Marchev]

Hello Nirav,

The silverlight plug-in resides in an object element in the asp page. You can place this element anywhere on the page, just as any other html element. You can read many online resources for this.

You check out our online examples, sdk samples and online documentation about how to populate the controls with data. Let us know if you have any specific questions.

Regards,
Petar Marchev
Telerik

 

 

[Nirav]

Hello Petar,

I am creating a telerik silverlight project. I want to bind the data to the chart from the stored procedures.  Should I use entity data model and WCF Data Service for the binding of data?

Let me know.

Thanks,
Nirav

[Petar Marchev]

Hello Nirav,

Almost none of our Silverlight controls work directly with stored procedures. The majority of our controls work with regular C# objects and collections.

For example the ChartView only works with a collection (no stored procedures and no domain data source). It requires a simple IEnumerable as ItemsSource and it is origin agnostic (it is not important where the collection came from). So as long as you build your application to expose these as properties in your view model and bind these properties in xaml, the chart will work. I suggest you start examining the links from my previous response.

Regards,
Petar Marchev
Telerik

 

 

[Nirav]

Hello Petar,

My database table has around 390 columns. I do not understand how can I bind them with the properties. Is there any easier way of doing this?

Thanks,
Nirav

[Nirav]

Hello Petar,

Is there a way to bind a radradialgauge to a Linq to SQL class using WCF?

Regards,
Nirav

[Martin Ivanov]

Hi Nirav,

As my colleague Petar stated in its last reply, the RadChartView suite works with a .NET collections (IEnumerable, IList, etc.). The same rule applies for most of our controls that displays some set of data (RadListBox, RadTreeView, RadPanelBar, RadGridView, etc.). Each of those controls expects an collection with .NET objects.

Basically before pass the items from your database to the RadChartView you can wrap them in a view models. Let's take for example the following table:

Rains
-----------
Id | Quantity | Date
1  |     10       | 2014 - 01 - 27
2  |     15       | 2014 - 01 - 28
3  |     13       | 2014 - 01 - 29

You can get and filter the data you will need to pass in the chart with the Linq to SQL and then you can wrap it in your view models (or directly try to pass the collection returned from the linq query).  Here is a sample pseudo code for this:

public class MyChartDataItemViewModel
{
  public double Quantity { get; set; }
  public double Date { get; set; }
}
.....

var dbRains =
   from item in db.Rains
   select new MyChartDataItemViewModel { Quantity = item.Quantity, Date = item.Date };

ObservableCollection<MyChartDataItemViewModel> chartItems = new ObservableCollection<MyChartDataItemViewModel>(dbRains.ToList());

this.chart.Series[0].ItemsSource = chartItems

....

<telerik:RadCartesianChart>
....
    <telerik:BarSeries ValueBinding="Quantity" CategoryBinding="Date" />
...
</telerik:RadCartesianChart>

Also, keep in mind that you cannot bind a property of an UI element to the database. There is no direct connection between the UI and the database. In order to make such connection you will need to handle the query to/from your database in the property's setter/getter. Here is an example:

public class GaugeViewModel
{
    private double gaugeValue;
    public double GaugeValue
    {
        set
        {
            this.gaugeValue = value;
            // make the query to your database that will change the value in the database
        }
        get
        {
            this.gaugeValue = // get the value from your data base
            return this.gaugeValue
        }
    }
}

In addition you can take a look at the DataBinding help article of the RadGauge control and the Binding Silverlight Controls to a WCF Data Service blog post.

I hope this information helps.

Regards,
Martin
Telerik