How to bind selected items in sfDatagrid to viewmodel?

[Ajit]

Hi 

I have a datagrid control that displays following details

public class BillingItem

    {

        public string Name { get; set; }

        public int Quantity { get; set; }

        public double Cost { get; set; }

    }

Xaml 

<sync:SfDataGrid AutoGenerateColumns="False"

                                     SelectionMode="Multiple" ColumnSizer="Star"

                                     ItemsSource="{Binding LstBillingItems}"

                                         SelectedItem="{Binding Path=SelectedBillingItem, Mode=TwoWay}"

                                     >

                            <sync:SfDataGrid.Columns>

                                <sync:GridTextColumn HeaderText="Name" MappingName="Name" />

                                <sync:GridTextColumn HeaderText="Quantity" MappingName="Quantity"/>

                                <sync:GridTextColumn HeaderText="MRP" MappingName="Cost" />

                            </sync:SfDataGrid.Columns>

                        </sync:SfDataGrid>

When I tried to access SelectedItems I didnt see it at all. I am only able to access SelectedItem.

How can I bind multiple selected items?

[Divakar Subramaniam]

Hi Ajit, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. 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. 

[Ajit]

Thanks for the reply and for the example. It works like charm now. 

And instead of Xamarin.Behaviors (which is discontinued by the developer) , I used Corcav.Behaviors (same developer that created Xamarin.Behaviors).

[Ajit]

I encountered one more problem though.

I have two views and  both views contains Sfdatagrid.

1: Main View    (displays the items added)  Datagrid name:   DgBilledItems

2: Add Items View (list of items)   Datagrid name:  DgItems

Steps what I do:

• user clicks on Add Item button in Main view
• Add items view opens and user select items and click on done.
• Main view adds the item selected by getting parameter passed through the Add items view
• now when user select items in Main view. The list selected items also contains the items that are selected in Add items view. How is that possible?

How can  DgBilledItems selected items contains the selected items from DgItems?

How to clear the previous selected items?

[Divakar Subramaniam]

Hi Ajit, 

 

We have checked your query. The binding mode of SfDataGrid.SelectedItems property is “TwoWay” in our source. Also, we have set the SfDataGrid.SelectedItems property to ViewModel.SelectedItems property. Hence, any changes in the view model property will automatically reflect in datagrid SelectedItems property. However, you can clear the previous selected items whenever you navigate to the next grid. Please refer the below code snippet. 

//You can clear all the previous items in the SelectedItems 

this.dataGrid.SelectedItems.Clear(); 

 

//You can remove any particular selected item in the SelectedItems 

this.dataGrid.SelectedItems.RemoveAt(1); 

 

 

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/forum/127622/ze/DataGridDemo1000219033  

 

Regards, 

Divakar. 

[Ajit]

Yes I got that.  Thanks for the example.

After some stack tracing I am able to find the solution. All I have to do was to clear the selected items before navigating.

var param = new NavigationParameters();

            var billingItems = new List<BillingItem>();

            foreach(var item in SelectedItems)

            {

                var it = (Item)item;

                var billingItem = new BillingItem

                {

                    Name = it.Name,

                    ItemCode=it.ItemCode,

                    Quantity=Quantity,

                    Cost=it.MRP,

                    Category=it.Category

                };

                billingItems.Add(billingItem);

            }

            SelectedItems.Clear();

            param.Add("BillingItems", billingItems);

[Ashok N]

Hi Ajit, 

Thanks for your update. Please let us know if you require any other assistance on this. 

Regards, 

Ashok