Search code examples
mvvmxamarindatagridxamarin.formssyncfusion

how to bind multiple selected items of syncfusion xamarin forms datagrid in mvvm?


I am able to bind SelectedItem if Selection Mode is single but if it is set to multiple then how do you bind it?

Here is what I tried for Single Selection Mode

<sync:SfDataGrid Grid.Row="1" AutoGenerateColumns="False" AllowSorting="True"
                                         AllowGroupExpandCollapse="True" AutoExpandGroups="True"
                                     SelectionMode="Multiple" ColumnSizer="Star"
                                     ItemsSource="{Binding LstItems}"
                                         SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}"
                                     >
                            <sync:SfDataGrid.Columns>
                                <sync:GridTextColumn HeaderText="Name" MappingName="Name" />
                                <sync:GridTextColumn HeaderText="MRP" MappingName="MRP"/>
                                <sync:GridTextColumn HeaderText="Category" MappingName="Category" Width="0"/>
                            </sync:SfDataGrid.Columns>
                            <sync:SfDataGrid.GroupColumnDescriptions>
                                <sync:GroupColumnDescription ColumnName="Category"/>
                            </sync:SfDataGrid.GroupColumnDescriptions>
                        </sync:SfDataGrid>

In the above xaml, selection mode is set to multiple but I am unable to get the SelectedItems in xaml as mentioned here

https://help.syncfusion.com/xamarin/sfdatagrid/selection


Solution

  • In SfDataGrid, it is not possible to bind the SfDataGrid.SelectedItems property to the view model as like SelectedItem property since we can only get the selected items in SfDataGrid. Hence, you will not be able to bind the values in XAML for SelectedItems property.

    However, you can achieve your requirement by writing behavior for SfDataGrid which will not affect the MVVM pattern. Please refer the below code snippet.

    <sfGrid:SfDataGrid x:Name="dataGrid"
                       AutoGenerateColumns="True"
                       ItemsSource="{Binding OrdersInfo}"
                       SelectionMode="Multiple">
    
        <b:Interaction.Behaviors>
            <b:BehaviorCollection>
                <b:EventToCommand Command="{Binding SelectionCommand}"
                                  CommandParameter="{x:Reference Name=dataGrid}"
                                  EventName="SelectionChanged" />
            </b:BehaviorCollection>
        </b:Interaction.Behaviors>
    </sfGrid:SfDataGrid>
    
    // In ViewModel.cs
    
    public ViewModel()
    {
         selectionCommand = new Command<SfDataGrid>(onSelectionChanged);
         selectedItems = new ObservableCollection<object>();
    }
    
    private Command<SfDataGrid> selectionCommand;
    public Command<SfDataGrid> SelectionCommand
    {
        get { return selectionCommand; }
        set { selectionCommand = value; }
    }
    
    private ObservableCollection<object> selectedItems;
    
    public ObservableCollection<object> SelectedItems
    {
        get { return selectedItems; }
        set { selectedItems = value; }
    }
    
    private void onSelectionChanged(SfDataGrid obj)
    {
        //you can get the selected items in the datagrid
        selectedItems = obj.SelectedItems;
    }
    

    Also, we have prepared a sample for your reference and you can download the same from the below link.

    Sample link: http://www.syncfusion.com/downloads/support/directtrac/168321/ze/DataGridDemo352928928

    Regards,

    Divakar.