Zooming RadChart using MVVM

2 posts, 0 answers
  1. Moon
    Moon avatar
    11 posts
    Member since:
    Jan 2012

    Posted 04 Apr 2012 Link to this post


    I am using RadTreeView on the left side of the screen and showing relative data in RadChart on the right of the screen. I am using MVVM design pattern (WPF), but facing few problems (as mentioned below) while zooming chart data.

    1. I am NOT able to bind values for RangeEnd and RangeStart with MVVM property for zooming my chart data. My XAML code looks like:
                                                    <telerik:ChartArea Loaded="ChartArea_Loaded">
                                                                <telerik:ZoomScrollSettings />
                                                                <telerik:ZoomScrollSettings MinZoomRange="0.01" RangeEnd="{Binding ChartRangeEnd, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" RangeStart="{Binding ChartRangeStart, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" ScrollMode="ScrollAndZoom"  />
                                                            <telerik:AxisX IsDateTime="True"
                                                                   DefaultLabelFormat="dd-MMM HH:mm"
                                                                   LabelRotationAngle="30" StripLinesVisibility="Visible">
                                                                        <telerik:AxisStyles RenderOptions.ClearTypeHint="Enabled" />

    The properties definition in ViewModel is:
    double _chartRangeEnd;
            public double ChartRangeEnd 
                get { return _chartRangeEnd; }
                    _chartRangeEnd = value;

            double _chartRangeStart;
            public double ChartRangeStart
                get { return _chartRangeStart; }
                    _chartRangeStart = value;

    2. Zooming only works when I change RangeStart and RangeStart value pragmatically (in code behind on ChartArea_Loaded event), as shown below:
    private void ChartArea_Loaded(object sender, RoutedEventArgs e)
                this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.None;
                this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.RangeEnd = _viewModel.ChartRangeEnd;
                this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.RangeStart = _viewModel.ChartRangeStart;
                this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;

    Moreover if I remove top code line (this.radChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.None;) then slider stretches 100% rather then getting within the limit of RangeStart and RangeEnd values.

    The problem which I am facing while using code behind approach (using ChartArea_Loaded) is that when I click on any other node (after selecting first node) in the RadTreeView then RangeStart and RangeEnd values are not getting refreshed (as ChartArea_Loaded event is called only at the starting when Chart is loaded for the first time). 

    I am willing and hoping to resolve this problem by using MVVM.

    Any help will be highly appreciated.

    Thank you,
  2. Petar Marchev
    Petar Marchev avatar
    996 posts

    Posted 09 Apr 2012 Link to this post

    Hi Moon,

    Yes, there appears to be an issue related to the inheritance of the data context. For some reason the ZoomScrollSettings does not get a data context. As a simple work-around I can suggest that you set the source explicitly:
    RangeStart="{Binding SelectionStart, Source={StaticResource MainViewModel}}"

    I have attached a simple app that demonstrates this. I hope that it is a feasible solution to somehow import the view model into the page resources. 

    Petar Marchev
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top