RadChart as RadGridView column template

[Edo]

Hi,
I'm trying to show a RadGridView with a RadChart in each row.
Binding the grid's ItemSource to the relevant property works, all charts show the data labels,
However, only the last row's chart shows the actual value heights (see attached image).

Another issue is the commented ChartArea.AxisX. uncommenting this property section causes an NullReferenceException to be thrown from Telerik.Windows.Controls.Charting.AxisX.CalculateItemRange(DataSeries dataSeries, Int32 index)

Window1.xaml:

<Window x:Class="testApp.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:testApp"
        xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
        xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
        xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <my:Window1ViewModel x:Key="MyViewModel"/>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" DataContext="{StaticResource MyViewModel}">
        <telerik:RadGridView ItemsSource="{Binding Items}" AutoGenerateColumns="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Label}"/>
                <telerik:GridViewDataColumn Header="Values">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <telerikChart:RadChart ItemsSource="{Binding Values}"
                                                           UseDefaultLayout="False" MaxWidth="200" MaxHeight="100">
                                <telerikCharting:ChartArea x:Name="MyChartArea">
                                    <telerikCharting:ChartArea.AxisY>
                                        <telerikCharting:AxisY/>
                                    </telerikCharting:ChartArea.AxisY>
                                    <!--<telerikCharting:ChartArea.AxisX>
                                        <telerikCharting:AxisX/>
                                    </telerikCharting:ChartArea.AxisX>-->
                                </telerikCharting:ChartArea>
                                <telerikChart:RadChart.SeriesMappings>
                                    <telerikCharting:SeriesMapping ChartAreaName="MyChartArea">
                                        <telerikCharting:SeriesMapping.SeriesDefinition>
                                            <telerikCharting:LineSeriesDefinition LegendDisplayMode="None"/>
                                        </telerikCharting:SeriesMapping.SeriesDefinition>
                                        <telerikCharting:SeriesMapping.ItemMappings>
                                            <telerikCharting:ItemMapping DataPointMember="YValue"/>
                                        </telerikCharting:SeriesMapping.ItemMappings>
                                    </telerikCharting:SeriesMapping>
                                </telerikChart:RadChart.SeriesMappings>
                            </telerikChart:RadChart>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

    </Grid>
</Window>

Window1ViewModel.cs:

using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace testApp
{
  class Window1ViewModel
  {
    public ObservableCollection<ItemsClass> Items { get; set; }

    public Window1ViewModel()
    {
      Items = new ObservableCollection<ItemsClass>
              {
                new ItemsClass("Test1", new[] {0.1, 0.3, 0.5, 0.2}),
                new ItemsClass("Test2", new[] {0.2, 0.3, 0.5, 0.2}),
                new ItemsClass("Test3", new[] {0.3, 0.3, 0.5, 0.2})
              };
    }
  }

  public class ItemsClass
  {
    public string Label { get; set; }
    public IEnumerable<double> Values { get; set; }

    public ItemsClass(string label, IEnumerable<double> values)
    {
      Label = label;
      Values = values;
    }
  }
}

Any idea?
Thanks,
Edo

[Petar Marchev]

Hello Edo,

Thank you for the code snippets, I was able to create a new project based on this code and run it with no problem.

I was unable to reproduce neither of the issues you reported. I have attached a snapshot of the output the chart produced. I have also attached the project I used for your reference. See if you get the same behavior on your side. If you keep experiencing problems with this you can update the project to reproduce this faulty behavior so that we can investigate.

I guess that this code is just a small part of your actual project and this is why as a start you can try to place the chart inside a user control and place that user control in the DataTemplate and see how that goes.

On a side note I would like to direct to to our Sparklines. Depending on your scenario, on the type data you are trying to visualize, the Sparklines might be a better choice of visual display. You can explain your requirements to us so that we discuss what type of display may be most appropriate. 

All the best,
Petar Marchev
the Telerik team

[Edo]

Thanks Peter, for you replay.
Using the assemblies you included does work.
My version of Telerik controls is older, which must be the reason for the misbehavior.

I will look into upgrading the controls and also the Sparklines, which seem to be exactly what I need.

Edo