Extending RadChart for better MVVM binding

5 posts, 0 answers
  1. Andre
    Andre avatar
    31 posts
    Member since:
    Feb 2011

    Posted 28 Feb 2011 Link to this post


    Requirements

    RadControls            version

    2010_3_1314

    .NET version

    4.0

    Visual Studio version

    2010

    programming language

    C#

    browser support

    all browsers supported by RadControls



    PROJECT DESCRIPTION

    I would like to use RadChart with one Binding variable (IEnumerable of IEnumerables) and a datatemplate to define the data series.
    The way RadChart is Today, you can't do that since SeriesMapping is not a FrameworkElement and you can't define it on your xaml.

    The solution is creating a wrapper class that derives from FrameworkElement and exposes SeriesMapping properties as DependencyProperties.

    This makes RadChart 100% MVVM friendly, the same way MultiChart is.
    If you need other SeriesMapping properties, just add them to the SeriesMappingWrapper as a normal property or as a DependencyProperty if you need binding support.

    Check this thread and this for more information about the concept.

    Happy coding!

  2. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 03 Mar 2011 Link to this post

    Hello Andre,

    Thank you for this submission. The good news is that beginning Q1 2011 series mappings are freezables in WPF and will receive their inheritance context and can be used with bindings to view models. Furthermore this should already be working for silverlight since Q3 release.

    Best wishes,
    Vladimir Milev
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. Sebastian
    Sebastian avatar
    2 posts
    Member since:
    Oct 2011

    Posted 10 Jan 2012 Link to this post

    Hi Vladimir, you mentioned multiple series binding with MVVM would work for silverlight with Q3 release. Can you provide an example with code where a collection of collections can be bound to a RadChart instance? It's important that it works with live data.

    I used the approach of Andre but unfortunatelly, my chart does not update the view after the data has changed. Instead, it displays "no data series".

    thank you in advance
    Sebastian
  4. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 13 Jan 2012 Link to this post

    Hi,

    You can use this example as a starting point: http://demos.telerik.com/silverlight/#Chart/MultipleDataSources

    It shows how to have different series mappings in code and have each one bound to a different data source.

    Kind regards,
    Vladimir Milev
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  5. Sebastian
    Sebastian avatar
    2 posts
    Member since:
    Oct 2011

    Posted 25 Jan 2012 Link to this post

    Hi, the problem is solved thanks to the telerik support team (I created a ticket for this). It's important to use the DefaultView with the MvvmRadChart component! The following snippet gives you an idea.

    <TelerikChart:MvvmRadChart x:Name="RadChartUC"
                SeriesSource="{Binding ChartDatapointRegions}"
                SeriesTemplateSelector="{StaticResource chartTemplateSelector}">    
                    <TelerikChart:MvvmRadChart.DefaultView>
                        <telerik:ChartDefaultView>
                            <telerik:ChartDefaultView.ChartTitle>
                                <telerik:ChartTitle Content="{Binding ChartTitle}"/>
                            </telerik:ChartDefaultView.ChartTitle>
                            <telerik:ChartDefaultView.ChartArea>
                                <telerik:ChartArea>
                                   <telerik:ChartArea.AxisX>
                                        <telerik:AxisX Title="{Binding ChartAxisXTitle}"/>
                                    </telerik:ChartArea.AxisX>
                                    <telerik:ChartArea.AxisY>
                                        <telerik:AxisY
                                    Title="{Binding ChartAxisYTitle}">
                                        </telerik:AxisY>
                                    </telerik:ChartArea.AxisY>
                                </telerik:ChartArea>
                            </telerik:ChartDefaultView.ChartArea>
                        </telerik:ChartDefaultView>
                    </TelerikChart:MvvmRadChart.DefaultView>
            </TelerikChart:MvvmRadChart>
Back to Top