ChartView : How to Navigate/Move DataPoint Selection using Keyboard Right,Left

[Sivakumar]

My Requirement to move Datapoint selection using keyboards right,left arrow keys.I am already highlight datapoints using selection changed event.But How to navigate the point? 

Please see attached... 

 

[Sivakumar]

<telerik:RadCartesianChart Height="1"  Palette="Arctic" >
           <telerik:RadCartesianChart.HorizontalAxis>
               <telerik:CategoricalAxis VerticalLocation="Top" Visibility="Visible" LabelFitMode="None" LabelRotationAngle="-90"  />
           </telerik:RadCartesianChart.HorizontalAxis>
           <telerik:RadCartesianChart.VerticalAxis>
               <telerik:LinearAxis  Minimum="-1" Maximum="2" MajorStep="1"  MajorTickOffset="5" ElementBrush="Orange" />
           </telerik:RadCartesianChart.VerticalAxis>
           <telerik:RadCartesianChart.Series>
               <telerik:StepLineSeries>
                   <telerik:StepLineSeries.DataPoints>
                       <telerik:CategoricalDataPoint Value="1"/>
                       <telerik:CategoricalDataPoint Value="0" />
                       <telerik:CategoricalDataPoint Value="1" />
                       <telerik:CategoricalDataPoint Value="1" />
                       <telerik:CategoricalDataPoint Value="1"/>
                       <telerik:CategoricalDataPoint Value="1" />
                       <telerik:CategoricalDataPoint Value="0" />
                       <telerik:CategoricalDataPoint Value="0"/>


                   </telerik:StepLineSeries.DataPoints>

                   <telerik:StepLineSeries.PointTemplate>
                       <DataTemplate >
                           <StackPanel>
                               <!--Fill="{Binding Presenter, Converter={StaticResource SeriesToPaletteColorConverter}}"-->
                               <Rectangle Height="126"  Width="10"     Stroke="Transparent" Fill="Red"  />
                           </StackPanel>
                           <!--<DataTemplate.Triggers>
                               <DataTrigger  Value="1"  Binding="{Binding Index}" >
                                   <Setter Property="Opacity" Value="0.01" />
                               </DataTrigger>
                           </DataTemplate.Triggers>-->
                       </DataTemplate>
                   </telerik:StepLineSeries.PointTemplate>
               </telerik:StepLineSeries>
           </telerik:RadCartesianChart.Series>
   <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" PanMode="Horizontal"   />
                <telerik:ChartSelectionBehavior DataPointSelectionMode="Single"
                                                SelectionChanged="RadChart1_LineSeriesSelectionChanged"/>
            </telerik:RadCartesianChart.Behaviors>

</telerik:RadCartesianChart>

[Martin Ivanov]

Hi Sivakumar,

This behavior is not supported by RadChartView. However, you can achieve your requirement by subscribing for the KeyDown event of the chart and inside its handler change the selected item. To do this, you can get the currently selected item and its index in the DataPoints collection of the series and increment the index with 1 or -1 (based on the pressed key). Then get the data point positioned on the new index and set its IsSelected property to true.

You can take a look at the attached project which contains sample implementation of this approach. But please keep in mind that this is customization and it is not well tested. So, I cannot guarantee that it will work in all expected cases. This is why I recommend you to test it properly if you decide to use it in production.

Regards,
Martin
Telerik