How to synchronize the selection between WPF Chart (SfChart) and DataGrid?
Description
In a WPF SfChart and SfDataGrid, it is often useful to synchronize selection between the chart and the data grid. This allows users to click on a chart segment and see the corresponding row selected in the data grid, and vice versa.
Solution
1. Binding both chart and data grid to a shared data source.
2. You can also synchronically make the selection between the data grid and chart by binding the SelectedIndex (row index) property of data grid with the SelectedIndex property of the chart’s selection behavior as follows.
XAML [SfChart]
<!--Initialization of the selection behavior-->
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartSelectionBehavior SelectionMode="MouseClick"/>
</syncfusion:SfChart.Behaviors>
<!—ListenPropertyChange is made true to update the SfChart segment when the data is changed in the SfDataGrid-->
<!--Binding the SelectedIndex Property of the Series with the SelectedIndex property of the SfDataGrid-->
<syncfusion:ColumnSeries x:Name="sampleSeries1" Label="2013" ListenPropertyChange="True" SegmentSelectionBrush="DarkBlue" SelectedIndex="{Binding ElementName=sampleGrid, Path=SelectedIndex, Mode=TwoWay}" ItemsSource="{Binding Computers, Mode=TwoWay}" XBindingPath="Computer" YBindingPath="Year2013"/>
<syncfusion:ColumnSeries x:Name="sampleSeries2" Label="2014" ListenPropertyChange="True" SegmentSelectionBrush="DarkBlue" SelectedIndex="{Binding ElementName=sampleGrid, Path=SelectedIndex, Mode=TwoWay}" ItemsSource="{Binding Computers, Mode=TwoWay}" XBindingPath="Computer" YBindingPath="Year2014"/>
XAML [SfDataGrid]
<syncfusion:SfDataGrid x:Name="sampleGrid" Grid.Row="1" AllowEditing="True" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Computers, Mode=TwoWay}" Margin="10,10,10,16" Height="146">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn HeaderText="Computer" MappingName="Computer" MinimumWidth="329"/>
<syncfusion:GridTextColumn TextAlignment="Right" HeaderText="2013" MappingName="Year2013" MinimumWidth="329"/>
<syncfusion:GridTextColumn TextAlignment="Right" HeaderText="2014" MappingName="Year2014" MinimumWidth="329"/>
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
C# [SfChart]
//Creation of the binding for the datasource
Binding mainData = new Binding();
mainData.Path = new PropertyPath("Computers");
mainData.Mode = BindingMode.TwoWay;
//Creation of the binding for the SelectedIndex property of the SfDataGrid
Binding gridIndBind = new Binding();
gridIndBind.ElementName = "sampleGrid";
gridIndBind.Path = new PropertyPath("SelectedIndex");
gridIndBind.Mode = BindingMode.TwoWay;
//Initialization of the selection behavior
ChartSelectionBehavior clickSelection = new ChartSelectionBehavior();
clickSelection.SelectionMode = Syncfusion.UI.Xaml.Charts.SelectionMode.MouseClick;
sampleChart.Behaviors.Add(clickSelection);
//Binding the shared datasource
sampleSeries1.SetBinding(ColumnSeries.ItemsSourceProperty, mainData);
sampleSeries1.XBindingPath = "Computer";
sampleSeries1.YBindingPath = "Year2013";
// ListenPropertyChange is made true to update the SfChart segment when the data is changed in the SfDataGrid
sampleSeries1.ListenPropertyChange = true;
sampleSeries1.SegmentSelectionBrush = Brushes.DarkBlue;
// Binding the SelectedIndex Property of the Series with the SelectedIndex property of the SfDataGrid
sampleSeries1.SetBinding(ColumnSeries.SelectedIndexProperty, gridIndBind);
sampleSeries2.SetBinding(ColumnSeries.ItemsSourceProperty, mainData);
sampleSeries2.XBindingPath = "Computer";
sampleSeries2.YBindingPath = "Year2014";
sampleSeries2.ListenPropertyChange = true;
sampleSeries2.SegmentSelectionBrush = Brushes.DarkBlue;
sampleSeries2.SetBinding(ColumnSeries.SelectedIndexProperty, gridIndBind);
C# [SfDataGrid]
//Binding the shared datasource sampleGrid.SetBinding(SfDataGrid.ItemsSourceProperty, mainData);
Output
When a segment in column series is selected using the mouse click, the corresponding SfDataGrid row also will be selected and vice-versa as shown in the below image.
Set the ListenPropertyChange property to true for listening the update of the properties in the underlying data source.
The following screenshot illustrates the output after editing the data in a cell.
Note: The segment is updated only when the corresponding data grid cell loses its focus (since the underlying values are updated after that).
Conclusion
I hope you enjoyed learning about how to synchronize the selection between WPF Chart (SfChart) and DataGrid.
You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations. You can also explore documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
