Selection in RangeBarSeries

4 posts, 1 answers
  1. Alex
    Alex avatar
    14 posts
    Member since:
    Nov 2013

    Posted 02 Aug 2014 Link to this post

    My objective is to achieve the same selection behavior for RangeBarSeris as documented in here http://www.telerik.com/help/windows-phone/radchart-features-selection.html for BarSeries. In other words, when users tap on a DataPoint I would like them to see a visual indication of the selection action in the form of a change in color for the selected DataPoint.
    Unfortunately, I can't seem to reproduce the same behavior for RangeBarSeris using the approach suggested in the documentation (see link above).

    Below is the relevant XAML, also attaching my project that illustrates my issue (zip file with jpeg extension).
    Just to restate, when users tap on a DataPoint there is no change in the appearance of the selected DataPoint.
    Thanks in advance.
    Alex.

    <telerikChart:RadCartesianChart x:Name="HeartRateZoneChart"
                                            Palette="Warm"
                                            SelectionPalette="WarmSelected"
                                            Margin="0, 30, 15, 50">

                    <telerikChart:RadCartesianChart.Behaviors>
                        <telerikChart:ChartSelectionBehavior DataPointSelectionMode="Single"/>
                    </telerikChart:RadCartesianChart.Behaviors>

                    <telerikChart:RadCartesianChart.HorizontalAxis>
                        <telerikChart:CategoricalAxis 
                            TickThickness="0"
                            LineStroke="#808080"
                            x:Name="HorizontalAxis">
                            <telerikChart:CategoricalAxis.LabelTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding}" TextWrapping="Wrap" Width="120" />
                                </DataTemplate>
                            </telerikChart:CategoricalAxis.LabelTemplate>
                        </telerikChart:CategoricalAxis>
                    </telerikChart:RadCartesianChart.HorizontalAxis>

                    <telerikChart:RadCartesianChart.VerticalAxis>
                        <telerikChart:LinearAxis Maximum="220"
                                             LineThickness="0"
                                             TickThickness="0"
                                             Minimum="90"
                                             MajorStep="20"
                                             x:Name="VerticalAxis"/>
                    </telerikChart:RadCartesianChart.VerticalAxis>

                    <telerikChart:RangeBarSeries x:Name="BarSeries"
                        CategoryBinding="Name" 
                        ItemsSource="{Binding ElementName=MainApplicationPage, Path=DataPoints}"
                        Canvas.ZIndex="2"
                        HighBinding="High"
                        LowBinding="Low">
                        <telerikChart:RangeBarSeries.PointTemplate>
                            <DataTemplate>
                                <Grid Background="{StaticResource PhoneForegroundBrush}">
                                    <Canvas VerticalAlignment="Top">
                                        <TextBlock 
                                                Text="{Binding Path=High}"
                                                Canvas.Left="10"
                                                Canvas.Top="-28"/>
                                    </Canvas>
                                    <Canvas VerticalAlignment="Bottom">
                                        <TextBlock 
                                                Text="{Binding Path=Low}"
                                                Canvas.Left="7"/>
                                    </Canvas>
                                </Grid>
                            </DataTemplate>
                        </telerikChart:RangeBarSeries.PointTemplate>
                    </telerikChart:RangeBarSeries>
                </telerikChart:RadCartesianChart>
  2. Answer
    Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    661 posts

    Posted 06 Aug 2014 Link to this post

    Hi Alex,

    From the provided project I can see that you set he RangeBarSeries.PointTemplate property which means that the chart ignores its Palette and SelectionPalette properties and that's why the color of the bar does not change.
    In case you need to change the PointTemplate property, I can suggest another approach. You can add a bool IsSelected property in your dataitem which will track if the point is selected or not. Then, in the template of the point you can use a ValueConverter for the Grid.Background that will return a color depending on the selection state of the point. For your convenience, I have modified the project to demonstrate the approach.

    I hope this helps.

    Regards,
    Ivaylo Gergov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. Alex
    Alex avatar
    14 posts
    Member since:
    Nov 2013

    Posted 09 Aug 2014 in reply to Ivaylo Gergov Link to this post

    Ivaylo, 
    Thank you so much, especially for taking the time to put together a sample; this is exactly what I was looking for.

    If I may suggest: expand the documentation with an example of using SelectionChanged event of the ChartSelectionBehaviors.

    Alex

  5. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    661 posts

    Posted 12 Aug 2014 Link to this post

    Hi Alex,

    Thank you for your feedback. We will definitely include such example in our documentation in the future releases.

    Please, feel free to contact us if you have any other questions or suggestions.

    Regards,
    Ivaylo Gergov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner