Integration with RadGridView
The Telerik RadChart supports great integration with other controls. This tutorial will show you how to integrate RadChart with RadGridView.
The final result should look like the snapshots below:
This tutorial will use the Northwind database, which can be downloaded from here.
- Here is the initial staging:
On the left side you have a RadGridView, where the UnitPrice and UnitsInStock properties from the Products table in the Northwind database will be displayed. When you select a single row, a bar chart will be generated to compare both of the parameters. If you select several rows, then a line chart will be generated.
- Populate the RadGridView control with all products from the Northwind database. Here is a sample code how to do that:
Declare the NorthwindDataSource class as a resource in your application and set it as an ItemsSource for the gridview.
Here is the result so far:
The next step is to build the bar chart (comparing the UnitPrice and UnitsInStock parameters) depending on the selected row(s) in the gridview.
Attach to the SelectionChanged event of the RadGridView.
- Switch to the code-behind and add the following code in the event handler. It aims to get all the selected products and to build the chart.
- Here is the code for the CreateSeriesMapping method. It builds the RadChart control based on the selected products. If there is only one product that is selected, then the result will be a BarChart comparing the UnitPrice and the UnitsInStock parameters. If there are two or more products that are selected, then the result will be a LineChart.
- The SetChartItemsSource method does only one thing - it sets the ItemsSource of the chart.
Here is the final result, when you select single row from the grid view:
And when you select multiple rows: