We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to synchronize the selection between the chart and data grid?

Platform: UWP |
Control: SfChart |
Published Date: February 25, 2016 |
Last Revised Date: June 27, 2019

Combining a chart with data grid is the most obvious scenario for all real-time dashboards. The following code example explains this.

You can synchronize the data source/items source of the data grid with chart by binding the same data source between the chart and data grid.

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-->
<syncfusion:ColumnSeries  x:Name="sampleSeries1" Label="2013" ListenPropertyChange="True"                                         
SegmentSelectionBrush="DarkBlue"
  <!--Binding the SelectedIndex Property of the Series with the SelectedIndex property of the SfDataGrid-->
 SelectedIndex="{Binding ElementName=sampleGrid,   Path=SelectedIndex, Mode=TwoWay}"
<!--Binding the shared datasource-->
                                      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 [Grid]

<syncfusion:SfDataGrid x:Name="sampleGrid" Grid.Row="1" AllowEditing="True"                               
                               HorizontalContentAlignment="Center" 
VerticalContentAlignment="Center" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
<!--Binding the shared datasource-->                               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# [Grid]

      //Binding the shared datasource
      sampleGrid.SetBinding(SfDataGrid.ItemsSourceProperty, mainData);

Output

The following screenshot illustrates the output.Synchronized chart and grid in WPF

Figure 1: Synchronized SfChart and SfDataGrid.

The following screenshot illustrates the output after the selection has been made on the segment of SfChart.

When a segment in column series is selected using the mouse click, the corresponding SfDataGrid row also will be selected and vice-versa.

Selection synchronization between chart and grid in WPF

Figure 2: Synchronized SfChart and SfDataGrid after the selection has been made on the SfChart.

The ListenPropertyChange property should be set 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 cell loses its focus (since it updates the underlying values after that).

Data modification synchronization between chart and grid in WPF

Figure 3: Synchronized SfChart and SfDataGrid after the cell data is changed.

2X faster development

The ultimate UWP UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon