Using XValue for Nested collections

[Michele]

Dear Telerik support,

I am using nested collections to display some lines on the chart.
I need to use both X and Y coordinates which I have implemented with the usual:
...
                    <telerik:ItemMapping FieldName="MyXValue" DataPointMember="XValue"/>
                    <telerik:ItemMapping FieldName="MyYValue" DataPointMember="YValue"/>
...

This work perfectly for a single, not nested line series.

However when I run my application I get the following error:

System.Windows.Data Error: BindingExpression path error: 'MyXValue' property not found on ObservableCollection`1[ChartPoint]' 'ObservableCollection`1[ChartPoint]' (HashCode=30301652). BindingExpression: Path='MyXValue' DataItem='ObservableCollection`1[ChartPoint]' (HashCode=30301652); target element is 'Telerik.Windows.Data.ObjectDataBinder+ValueSetter' (Name=''); target property is 'Value' (type 'System.Object')..

Is there a reason why the nested collection cannot used the XValue DataPointMember?

Thanks for the help,

Michele

[Petar Marchev]

Hello Michele,

Have you set the CollectionIndex of the series mapping?

If you need further assistance I will ask that you provide us with the code needed to reproduce this, so that we can test it and investigate the origins of this error.

Kind regards,
Petar Marchev
the Telerik team

[Michele]

The collectionindex field is set. In any case this is the code I am using:

                <telerik:SeriesMapping ItemsSource="{Binding ChartPoints}" LegendLabel="{Binding Path=ModuleStrings.LineTitle, Source={StaticResource ModuleStringsWrapper}}">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:ScatterSeriesDefinition ShowItemLabels="False" AxisName="SecondYAxis"/>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping FieldName="MyXValue" DataPointMember="XValue"/>
                    <telerik:ItemMapping FieldName="MySecondYValue" DataPointMember="YValue"/>
                </telerik:SeriesMapping>
                <telerik:SeriesMapping ItemsSource="{Binding DrawnLines}" CollectionIndex="0">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:LineSeriesDefinition ShowItemLabels="False" LegendDisplayMode="None" ShowPointMarks="False" />
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping FieldName="MyXValue" DataPointMember="XValue"/>
                    <telerik:ItemMapping FieldName="MyYValue" DataPointMember="YValue"/>
                </telerik:SeriesMapping>

ChartPoints is a ObservableCollection of Points (which is an object with MyXValue, MyYValue and MySecondYValue properties).
DrawnLines is a List of ObservableCollection of Points.
The ChartPoint serie is correctly displayed while the DrawnLines serie get the mentioned error. I want to stress the fact that the YValue is correctly accepted.

Regards,

Michele

[Michele]

Hi Petar,

The forum does not allow me to submit a zipped solution neither I can do it on the public issue tracker. Therefore I will post here the code of the four files.

Mainpage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace UseXValueInListOfCollectionSeries
{
    public partial class MainPage : UserControl
    {
        public List<ObservableCollection<ChartPoint>> DrawnLines { get; set; }

        public ObservableCollection<ChartPoint> Line { get; set; }

        public MainPage()
        {
            DrawnLines = new List<ObservableCollection<ChartPoint>>();
            ObservableCollection<ChartPoint> line = new ObservableCollection<ChartPoint>();
            line.Add(new ChartPoint() { MyXValue = 0, MyYValue = 12 });
            line.Add(new ChartPoint() { MyXValue = 10, MyYValue = 11 });
            DrawnLines.Add(line);

            Line = new ObservableCollection<ChartPoint>();
            Line.Add(new ChartPoint() { MyXValue = 0, MySecondYValue = 150 });
            Line.Add(new ChartPoint() { MyXValue = 10, MySecondYValue = 100 });

            DataContext = this;

            InitializeComponent();
        }
    }
}

MainPage.xaml

<UserControl x:Class="UseXValueInListOfCollectionSeries.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    d:DesignHeight="500" d:DesignWidth="800">

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadChart x:Name="chart" Height="500" Width="800" BorderThickness="0" HorizontalAlignment="Left" Grid.Column="0" Grid.Row="0">
            <telerik:RadChart.SeriesMappings>
                <telerik:SeriesMapping ItemsSource="{Binding Line}" LegendLabel="Line 1">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:LineSeriesDefinition ShowItemLabels="False" AxisName="SecondYAxis"/>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping FieldName="MyXValue" DataPointMember="XValue"/>
                    <telerik:ItemMapping FieldName="MySecondYValue" DataPointMember="YValue"/>
                </telerik:SeriesMapping>
                <telerik:SeriesMapping ItemsSource="{Binding DrawnLines}" CollectionIndex="0">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:LineSeriesDefinition ShowItemLabels="False" LegendDisplayMode="None" ShowPointMarks="False" />
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping FieldName="MyXValue" DataPointMember="XValue"/>
                    <telerik:ItemMapping FieldName="MyYValue" DataPointMember="YValue"/>
                </telerik:SeriesMapping>
            </telerik:RadChart.SeriesMappings>
            <telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView ChartLegendPosition="Bottom">
                    <telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartArea EnableAnimations="False" BorderThickness="0,10,0,0" SmartLabelsEnabled="False"
                                           LegendName="chartLegend">
                            <telerik:ChartArea.AxisX>
                                <telerik:AxisX AutoRange="True" Title="XAxis" />
                            </telerik:ChartArea.AxisX>
                            <telerik:ChartArea.AxisY>
                                <telerik:AxisY AutoRange="False" Title="YAxis" Step="0.1" MaxValue="12.2" MinValue="11.5" />
                            </telerik:ChartArea.AxisY>
                            <telerik:ChartArea.AdditionalYAxes>
                                <telerik:AxisY AutoRange="False" Title="SecondYAxis" AxisName="SecondYAxis" Step="20" MaxValue="200" MinValue="0" />
                            </telerik:ChartArea.AdditionalYAxes>
                        </telerik:ChartArea>
                    </telerik:ChartDefaultView.ChartArea>
                    <telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartLegend x:Name="chartLegend" Header="Legend"  IsEnabled="True" UseAutoGeneratedItems="True" Visibility="Visible" />
                    </telerik:ChartDefaultView.ChartLegend>
                </telerik:ChartDefaultView>
            </telerik:RadChart.DefaultView>
        </telerik:RadChart>
    </Grid>
</UserControl>

App.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace UseXValueInListOfCollectionSeries
{
    public partial class App : Application
    {
        public App()
        {
            this.Startup += this.Application_Startup;
            this.Exit += this.Application_Exit;
            this.UnhandledException += this.Application_UnhandledException;

            InitializeComponent();
        }

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            this.RootVisual = new MainPage();
        }

        private void Application_Exit(object sender, EventArgs e)
        {

        }

        private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
        {
            // If the app is running outside of the debugger then report the exception using
            // the browser's exception mechanism. On IE this will display it a yellow alert
            // icon in the status bar and Firefox will display a script error.
            if (!System.Diagnostics.Debugger.IsAttached)
            {

                // NOTE: This will allow the application to continue running after an exception has been thrown
                // but not handled.
                // For production applications this error handling should be replaced with something that will
                // report the error to the website and stop the application.
                e.Handled = true;
                Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); });
            }
        }

        private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e)
        {
            try
            {
                string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace;
                errorMsg = errorMsg.Replace('"', '\'').Replace("\r\n", @"\n");

                System.Windows.Browser.HtmlPage.Window.Eval("throw new Error(\"Unhandled Error in Silverlight Application " + errorMsg + "\");");
            }
            catch (Exception)
            {
            }
        }
    }
}

App.xaml

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="UseXValueInListOfCollectionSeries.App"
             >
    <Application.Resources>

    </Application.Resources>
</Application>

Thanks for the help,

Michele

[Petar Marchev]

Hello Michele,

I created a project with the code that you have provided. I had to add a ChartPoint class in order to compile and run the project. When the app is compiled and run I do not get any errors and a window is open with a chart in it.

I have attached to this post the project so that you can test it. Let us know if you get different results.

If you need further assistance you can open a support ticket where you can attach a zip that contains a project that reproduces this issue. 

All the best,
Petar Marchev
the Telerik team

[Michele]

Dear Petar,

The line that you see is the first series which is a standard ObservableCollection<ChartPoint> called Line

<telerik:SeriesMapping ItemsSource="{Binding Line}" LegendLabel="Line 1">
     <telerik:SeriesMapping.SeriesDefinition>
         <telerik:LineSeriesDefinition ShowItemLabels="False" AxisName="SecondYAxis"/>
     </telerik:SeriesMapping.SeriesDefinition>
     <telerik:ItemMapping FieldName="MyXValue" DataPointMember="XValue"/>
     <telerik:ItemMapping FieldName="MySecondYValue" DataPointMember="YValue"/>
 </telerik:SeriesMapping>

There should be a second line defined by a List<ObservableCollection<ChartPoint>> called DrawnLines

<telerik:SeriesMapping ItemsSource="{Binding DrawnLines}" CollectionIndex="0">
    <telerik:SeriesMapping.SeriesDefinition>
        <telerik:LineSeriesDefinition ShowItemLabels="False" LegendDisplayMode="None" ShowPointMarks="False" />
    </telerik:SeriesMapping.SeriesDefinition>
    <telerik:ItemMapping FieldName="MyXValue" DataPointMember="XValue"/>
    <telerik:ItemMapping FieldName="MyYValue" DataPointMember="YValue"/>
</telerik:SeriesMapping>

This is the one giving the error and which is not displayed in you image.

If you look at your output you will find the mentioned error

Still I cannot attach a solution to this post. When I open the attach file box and I select my zip file I get this:
Incorrect file type. Please choose another file.
2MB: the max total size of all attached files
Allowed extensions: .gif, .jpg, .jpeg, .png

Is this a problem with Mozilla?

Michele

[Petar Marchev]

Hi Michele,

Thank you for clarifying this. I expected an exception to be thrown.

I now see what the problem is. The CollectionIndex property is not taken into consideration when the ItemsSource of the SeriesMapping is set, it only plays a role if the ItemsSource of the Chart was set (but not of the SeriesMapping).

You can either set the index inside the binding:

<telerik:SeriesMapping ItemsSource="{Binding DrawnLines[0]}">

 
or you can set the ItemsSource of the chart to be DrawnLines.

Kind regards,
Petar Marchev
the Telerik team