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. Image for the cookie policy date
close icon

How to bind selected items in sfDatagrid to viewmodel?

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?



6 Replies

DS Divakar Subramaniam Syncfusion Team November 30, 2016 02:02 PM UTC

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. 
 
Regards, 
Divakar. 



AJ Ajit November 30, 2016 04:11 PM UTC

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).


AJ Ajit November 30, 2016 05:23 PM UTC

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?



DS Divakar Subramaniam Syncfusion Team December 1, 2016 11:07 AM UTC

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. 
 
Regards, 
Divakar. 



AJ Ajit December 2, 2016 05:52 AM UTC

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);


AN Ashok N Syncfusion Team December 5, 2016 10:52 AM UTC

Hi Ajit, 

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

Regards, 
Ashok 


Loader.
Live Chat Icon For mobile
Up arrow icon