Show selected rows from one SfDataGrid in another SfDataGrid (and remove when unselected)

[James]

I'm looking for a solution for my problem.

There's a View where i placed SfDataGrid1 and SfDataGrid2.

How to show in SfDataGrid2 rows selected in SfDataGrid1? SfDataGrid allows select multiple rows.

In ViewModel i created an ObservableCollection property that is binded to SfDataGrid2 ItemsSource. When selecting row in SfDataGrid1 the selected row should be added to that ObservableCollection and when deselecting one of the selected rows the unselected row shoub be removed from the collect.

Using SelectedIems of SfDataGrid1 as a ItemsSource for SfDAtaGrid2 is not what i'am looking for. I'm looking for MVVM way.

[Vijayarasan Sivanandham]

Hi James,

Thank you for contacting Syncfusion Support.

Your requirement can be achieved by binding the ObservableCollection property that is bound to SfDataGrid2.ItemsSource property to the SfDataGrid1.SelectedItems property. 

<Grid> 

        <Grid.ColumnDefinitions> 

            <ColumnDefinition/> 

            <ColumnDefinition/> 

        </Grid.ColumnDefinitions> 

        <syncfusion:SfDataGrid x:Name="SfDataGrid1"     

                               Grid.Column="0"   

                               SelectionMode="Multiple"  

                               SelectedItems="{Binding Orders2}" 

                               ItemsSource="{Binding Orders1}"                                 

                               AutoGenerateColumns="True">            

        </syncfusion:SfDataGrid> 

        <syncfusion:SfDataGrid x:Name="SfDataGrid2"   

                               Grid.Column="1" 

                               AllowFiltering="True" 

                               SelectionMode="Multiple"   

                               ItemsSource="{Binding Orders2}"  

                               AutoGenerateColumns="True"/>        

</Grid> 

private ObservableCollection<object> _orders2; 

         

public ObservableCollection<object> Orders2 

{ 

            get { return _orders2; } 

            set { _orders2 = value; } 

} 

Note: The object type must be defined as SelectedItems bound ObservableCollection property.

Sample Link: https://www.syncfusion.com/downloads/support/forum/168083/ze/SfDataGridDemo294616741 

Please let us know if you have any concerns in this.

Regards,
Vijayarasan S 

[James]

Thanks for help.

How does this binding work?

When i put a breakpoint in setter and select rows in SfDataGrid1 the brak point is never reached.

public ObservableCollection<object> Orders2

{

get { return _orders2; }

set

{

_orders2 = value; // breakpoint in this line

}

}

Somehow the selected rows are inserted into Orders2 and SfDataGrid2 sees them :)

Is there any way to execute a method/command when a row is inserted into Orders2 or removed from Orders2?

[Vijayarasan Sivanandham]

Hi James,

Thanks for the update.

Your requirement can be achieved by customize the SelectionChanged event in SfDataGrid. Please refer the below code snippet, 

Code snippet XAML: 

<Grid> 

        <Grid.ColumnDefinitions> 

            <ColumnDefinition/> 

            <ColumnDefinition/> 

        </Grid.ColumnDefinitions> 

        <syncfusion:SfDataGrid x:Name="SfDataGrid1"     

                               Grid.Column="0"   

                               SelectionMode="Multiple"                                 

                               ItemsSource="{Binding Orders1}"                                 

                               AutoGenerateColumns="True"> 

            <i:Interaction.Behaviors> 

                <local:SfDataGridBehavior /> 

            </i:Interaction.Behaviors> 

        </syncfusion:SfDataGrid> 

        <syncfusion:SfDataGrid x:Name="SfDataGrid2"   

                               Grid.Column="1" 

                               AllowFiltering="True" 

                               SelectionMode="Multiple"   

                               ItemsSource="{Binding Orders2}"                                

                               AutoGenerateColumns="True"/>        

</Grid> 

Code snippet C#: 

public class SfDataGridBehavior : Behavior<SfDataGrid> 

{ 

        protected override void OnAttached() 

        {            

            AssociatedObject.SelectionChanged += AssociatedObject_SelectionChanged; 

        } 

 

     private void AssociatedObject_SelectionChanged(object sender, GridSelectionChangedEventArgs e) 

     { 

            //get the ObservableCollection property that is binded to SfDataGrid2 ItemsSource 

            var orders2 = ((sender as SfDataGrid).DataContext as ViewModel).Orders2; 

 

            //Add the items when selecting records in SfDataGrid1 

            foreach (var record in e.AddedItems) 

            { 

                orders2.Add((record as GridRowInfo).RowData); 

            } 

 

            //remove the items when unselecting records in SfDataGrid1 

            foreach (var record in e.RemovedItems) 

            { 

                orders2.Remove((record as GridRowInfo).RowData); 

            } 

        } 

 

        protected override void OnDetaching() 

        { 

            AssociatedObject.SelectionChanged -= AssociatedObject_SelectionChanged; 

        } 

} 

Sample Link: https://www.syncfusion.com/downloads/support/forum/168083/ze/SfDataGridDemo-1120898667 

Please let us know if you have any concerns in this.

Regards,
Vijayarasan S