xamarin-docs/Xamarin/DataGrid/MVVM.md

layout	title	description	platform	control	documentation
post	Working With MVVM in Xamarin DataGrid control | Syncfusion	Learn here all about Working With MVVM support in Syncfusion Xamarin DataGrid (SfDataGrid) control and more.	xamarin	SfDataGrid	UG

Working With MVVM in Xamarin DataGrid (SfDataGrid)

Xamarin.Forms DataGrid SelectedIndex binding

You can bind any int value to the SfDataGrid.SelectedIndex property to apply selection to a row programmatically.

{% tabs %}

{% highlight xaml %}

<sfgrid:SfDataGrid x:Name="dataGrid" AutoGenerateColumns="true" ItemsSource="{Binding State}" SelectionMode="Multiple" SelectedIndex="{Binding SelectedIndex}"> </sfgrid:SfDataGrid>

{% endhighlight %}

{% highlight c# %}

    //ViewModel.cs

    private int _selectedIndex;

    public int SelectedIndex
    {
        get { return _selectedIndex; }
        set { this._selectedIndex = value;
		RaisePropertyChanged("SelectedIndex"); }
    }

    public ViewModel()
    {
       this.State = AddStateDetails();
       this.SelectedIndex = 5;
    }
    
    public void AddStateDetails()
    {
        State.Add(new StateDetails("California", "Sacramento ", "Sacramento", "English", "Western", 49506799));
        State.Add(new StateDetails("Florida", "Tallahassee", "Tallahassee", "English", "South Eastern", 72147030));
        State.Add(new StateDetails("Texas", "Austin", "Austin", "English","South Central", 61095297));
        State.Add(new StateDetails("New Jersey", "Trenton", "Trenton", "English", "North Eastern", 6864602));
	}

{% endhighlight %}

{% endtabs %}

View sample in Github.

Xamarin.Forms DataGrid SelectedItem binding

You can bind an object from the underlying source collection to the SfDataGrid.SelectedItem property to apply selection to a row programmatically.

{% tabs %}

{% highlight xaml %}

<sfgrid:SfDataGrid x:Name="dataGrid" AutoGenerateColumns="False" ItemsSource="{Binding State}" SelectionMode="Multiple" SelectedItem="{Binding SelectedItem}"> </sfgrid:SfDataGrid>

{% endhighlight %}

{% highlight c# %}

    //ViewModel.cs code

    private object _selectedItem;

    public object SelectedItem
    {
        get { return _selectedItem; }
        set { this._selectedItem = value; RaisePropertyChanged("SelectedItem"); }
    }

    public ViewModel()
    {
        this.State = this.AddStateDetails();
        this.SelectedItem = State[3];
    }
    
    public void AddStateDetails()
    {
        State.Add(new StateDetails("California", "Sacramento ", "Sacramento", "English", "Western", 49506799));
        State.Add(new StateDetails("Florida", "Tallahassee", "Tallahassee", "English", "South Eastern", 72147030));
        State.Add(new StateDetails("Texas", "Austin", "Austin", "English","South Central", 61095297));
        State.Add(new StateDetails("New Jersey", "Trenton", "Trenton", "English", "North Eastern", 6864602));
	}

{% endhighlight %}

{% endtabs %}

View sample in Github.

Xamarin.Forms DataGrid SelectedItems binding

You can bind any object type collection to the SfDataGrid.SelectedItems property to apply selection to multiple rows programmatically.

{% tabs %}

{% highlight xaml %}

<sfgrid:SfDataGrid x:Name="dataGrid" AutoGenerateColumns="False" ItemsSource="{Binding State}" SelectionMode="Multiple" SelectedItems="{Binding SelectedItems}"> </sfgrid:SfDataGrid>

{% endhighlight %}

{% highlight c# %}

    //ViewModel.cs code

    private ObservableCollection<object> _selectedItems;

    public ObservableCollection<object> SelectedItems
    {
        get { return _selectedItems; }
        set { this._selectedItems = value; RaisePropertyChanged("SelectedItems"); }
    }

    public ViewModel()
    {
      this.State = this.AddStateDetails();
      this.SelectedItems.Add(State[1]);
      this.SelectedItems.Add(State[2]);
      this.SelectedItems.Add(State[3]);
    }
    
    public void AddStateDetails()
    {
        State.Add(new StateDetails("California", "Sacramento ", "Sacramento", "English", "Western", 49506799));
        State.Add(new StateDetails("Florida", "Tallahassee", "Tallahassee", "English", "South Eastern", 72147030));
        State.Add(new StateDetails("Texas", "Austin", "Austin", "English","South Central", 61095297));
        State.Add(new StateDetails("New Jersey", "Trenton", "Trenton", "English", "North Eastern", 6864602));
	}

{% endhighlight %}

{% endtabs %}

View sample in Github.

Xamarin.Forms DataGrid column properties binding

SfDataGrid allows you to assign values via binding to the properties of the GridColumn such as HeaderCellTextSize, CellTextSize, FontAttribute, RecordFont, HeaderFont etc.

{% tabs %}

{% highlight xaml %}

<sfgrid:SfDataGrid x:Name="dataGrid" AutoGenerateColumns="True" ItemsSource="{Binding State}"> sfgrid:SfDataGrid.Columns <sfgrid:GridTextColumn MappingName="Name" CellTextSize="{Binding CellTextSize,Source={x:Reference viewModel}}"/> </sfgrid:SfDataGrid.Columns> </sfgrid:SfDataGrid>

{% endhighlight %}

{% highlight c# %}

    //ViewModel.cs code

    private double cellTextSize;

    public double CellTextSize
    {
        get { return cellTextSize; }
        set 
        { 
            this.TextSize = value;
            RaisePropertyChanged("CellTextSize");
        }
    }

    public ViewModel()
    {
       this.CellTextSize = 20;
    }

{% endhighlight %}

{% endtabs %}

View sample in Github.

Binding Picker Column ItemsSource from ViewModel in Xamarin.Forms DataGrid

You can bind any collection to the GridPickerColumn.ItemsSource property to display a list of items in the GridPickerColumn when entering edit mode.

{% tabs %}

{% highlight xaml %}

<sfgrid:SfDataGrid x:Name="dataGrid" AutoGenerateColumns="False" ItemsSource="{Binding State}"> sfgrid:SfDataGrid.Columns <sfgrid:GridPickerColumn BindingContext="{x:Reference viewModel}" MappingName="Province" ItemsSource="{Binding StatesProvince}" /> </sfgrid:SfDataGrid.Columns> </sfgrid:SfDataGrid>

{% endhighlight %}

{% highlight c# %}

//ViewModel.cs
class ViewModel : INotifyPropertyChanged
{  
    private ObservableCollection<StateDetails> states = new ObservableCollection<StateDetails>();
    private ObservableCollection<string> stateProvince = new ObservableCollection<string>();
    
    public ObservableCollection<string> StatesProvince
    {
        get { return stateProvince; }
        set 
        {  
            stateProvince = value;
            OnPropertyChanged(nameof(StatesProvince));
        }
	}
	
	public ObservableCollection<StateDetails> State
    {
        get { return states; }
        set {states = value;}
    }
    
	public ViewModel()
	{
	     AddProvince();
         AddStateDetails();
	}
	
	private void AddProvince()
    {
        StatesProvince.Add("South Central");
        StatesProvince.Add("Eastern");
        StatesProvince.Add("North Eastern");
        StatesProvince.Add("Northern");
        StatesProvince.Add("South Eastern");
        StatesProvince.Add("Western");
    }
    
	public void AddStateDetails()
    {
        State.Add(new StateDetails("California", "Sacramento ", "Sacramento", "English", "Western", 49506799));
        State.Add(new StateDetails("Florida", "Tallahassee", "Tallahassee", "English", "South Eastern", 72147030));
        State.Add(new StateDetails("Texas", "Austin", "Austin", "English","South Central", 61095297));
        State.Add(new StateDetails("New Jersey", "Trenton", "Trenton", "English", "North Eastern", 6864602));
	}
}

{% endhighlight %}

{% endtabs %}

View sample in Github.

Binding the ItemsSource from ViewModel for the Picker loaded inside template column in Xamarin.Forms DataGrid

The ItemsSource of a picker which is loaded inside the GridTemplateColumn can be assigned any value via binding by passing the binding context as the Source to the ItemsSource property.

{% tabs %}

{% highlight xaml %}

<sfgrid:SfDataGrid x:Name="dataGrid" AutoGenerateColumns="False" ItemsSource="{Binding State}"> sfgrid:SfDataGrid.Columns <sfgrid:GridTemplateColumn MappingName="Province"> sfgrid:GridTemplateColumn.CellTemplate </sfgrid:GridTemplateColumn.CellTemplate> </sfgrid:GridTemplateColumn> </sfgrid:SfDataGrid.Columns> </sfgrid:SfDataGrid>

{% endhighlight %}

{% highlight c# %}

    //ViewModel.cs code

class ViewModel : INotifyPropertyChanged
{  
   private ObservableCollection<StateDetails> states = new ObservableCollection<StateDetails>();
   private ObservableCollection<string> stateProvince = new ObservableCollection<string>();
   public ObservableCollection<string> StatesProvince
    {
        get { return stateProvince; }
        set {   stateProvince = value;
            OnPropertyChanged(nameof(StatesProvince));}
	}
	public ObservableCollection<StateDetails> State
    {
        get { return states; }
        set{states = value;}
    }
	public ViewModel()
	{
	     AddProvince();
         AddStateDetails();
	}
    
    private void AddProvince()
    {
        StatesProvince.Add("South Central");
        StatesProvince.Add("Eastern");
        StatesProvince.Add("North Eastern");
        StatesProvince.Add("Northern");
        StatesProvince.Add("South Eastern");
        StatesProvince.Add("Western");
    }
    
	public void AddStateDetails()
    {
        State.Add(new StateDetails("California", "Sacramento ", "Sacramento", "English", "Western", 49506799));
        State.Add(new StateDetails("Florida", "Tallahassee", "Tallahassee", "English", "South Eastern", 72147030));
        State.Add(new StateDetails("Texas", "Austin", "Austin", "English","South Central", 61095297));
        State.Add(new StateDetails("New Jersey", "Trenton", "Trenton", "English", "North Eastern", 6864602));
	}
}

{% endhighlight %}

{% endtabs %}

View sample in Github.

Binding commands for the button loaded inside template column in Xamarin.Forms DataGrid

You can provide custom actions to the Command property of a button loaded inside the GridTemplateColumn via binding.

{% tabs %}

{% highlight xaml %}

<sfgrid:SfDataGrid x:Name="dataGrid" AutoGenerateColumns="False" ItemsSource="{Binding OrderInfoCollection}"> sfgrid:SfDataGrid.Columns
<sfgrid:GridTemplateColumn MappingName="Customer"> sfgrid:GridTemplateColumn.CellTemplate

             <DataTemplate>
                 <Button Text="Template" Command="{Binding ButtonCommand,Source={x:Reference viewModel}}"/>
             </DataTemplate>
        </sfgrid:GridTemplateColumn.CellTemplate>
    </sfgrid:GridTemplateColumn>
</sfgrid:SfDataGrid.Columns>

</sfgrid:SfDataGrid>

{% endhighlight %}

{% highlight c# %}

    //ViewModel.cs code

    private Command _buttonCommand;

    public Command ButtonCommand
    {
        get { return _buttonCommand; }
        set { this._buttonCommand = value;RaisePropertyChanged("ButtonCommand"); }
    }

     public ViewModel()
    {
      this.ButtonCommand = new Command(CustomMethod);
    }

    public void CustomMethod()
    {
        // Customize your code here
    }

{% endhighlight %}

{% endtabs %}

View sample in Github.

Binding columns collection from ViewModel in Xamarin.Forms DataGrid

You can bind any Columns type collection in the view model to the SfDataGrid.Columns property to load the necessary columns in the datagrid.

{% tabs %}

{% highlight xaml %}

<ContentPage.BindingContext> <local:ViewModel x:Name="viewModel"/> </ContentPage.BindingContext> <ContentPage.Content > <sfgrid:SfDataGrid ItemsSource="{Binding State}" NavigationMode="Cell" ColumnSizer="Auto" SelectionMode="Multiple" AutoGenerateColumns="False" Columns="{Binding SfGridColumns}"> </sfgrid:SfDataGrid> </ContentPage.Content>

{% endhighlight %}

{% highlight c# %}

// ViewModel.cs

class ViewModel : INotifyPropertyChanged { private Columns column = new Columns(); private ObservableCollection states = new ObservableCollection(); public Columns SfGridColumns { get{return column;} set{column = value;} } public ObservableCollection State { get { return states; } set{states = value;} } public ViewModel() { AddStateDetails(); GenerateColumn(); } private void GenerateColumn() { SfGridColumns.Add(new GridTextColumn() {MappingName="Name" }); SfGridColumns.Add(new GridTextColumn() {MappingName="LargestCity" }); SfGridColumns.Add(new GridNumericColumn() {MappingName="Population" }); }

	public void AddStateDetails()
    {
        State.Add(new StateDetails("California", "Sacramento ", "Sacramento", "English", "Western", 49506799));
        State.Add(new StateDetails("Florida", "Tallahassee", "Tallahassee", "English", "South Eastern", 72147030));
        State.Add(new StateDetails("Texas", "Austin", "Austin", "English","South Central", 61095297));
        State.Add(new StateDetails("New Jersey", "Trenton", "Trenton", "English", "North Eastern", 6864602));
	}
}

{% endhighlight %}

{% endtabs %}

View sample in Github.

Binding ComboBox Column ItemsSource from ViewModel in Xamarin.Forms DataGrid

You can bind any collection to the GridComboBoxColumn.ItemsSource property to display a list of items in the GridComboBoxColumn when entering edit mode.

{% tabs %}

{% highlight xaml %}

<ContentPage.BindingContext> <local:ViewModel x:Name="viewModel"/> </ContentPage.BindingContext> <ContentPage.Content > <sfgrid:SfDataGrid ItemsSource="{Binding State}" NavigationMode="Cell" ColumnSizer="Auto" SelectionMode="Multiple" AutoGenerateColumns="True"> sfgrid:SfDataGrid.Columns <sfgrid:GridComboBoxColumn AllowEditing="True" MappingName="Province" ItemsSource="{Binding StatesProvince}"> </sfgrid:GridComboBoxColumn> </sfgrid:SfDataGrid.Columns> </sfgrid:SfDataGrid> </ContentPage.Content>

{% endhighlight %}

{% highlight c# %}

// ViewModel.cs

class ViewModel : INotifyPropertyChanged
{  
   private ObservableCollection<StateDetails> states = new ObservableCollection<StateDetails>();
   private ObservableCollection<string> stateProvince = new ObservableCollection<string>();
   public ObservableCollection<string> StatesProvince
   {
        get { return stateProvince; }
        set {   
               stateProvince = value;
               OnPropertyChanged(nameof(StatesProvince));
            }
   }
   public ObservableCollection<StateDetails> State
   {
       get { return states; }
       set{states = value;}
   }
   
   public ViewModel()
   {
	     AddProvince();
         AddStateDetails();
   }
    private void AddProvince()
    {
        StatesProvince.Add("South Central");
        StatesProvince.Add("Eastern");
        StatesProvince.Add("North Eastern");
        StatesProvince.Add("Northern");
        StatesProvince.Add("South Eastern");
        StatesProvince.Add("Western");
    }
    
	public void AddStateDetails()
    {
        State.Add(new StateDetails("California", "Sacramento ", "Sacramento", "English", "Western", 49506799));
        State.Add(new StateDetails("Florida", "Tallahassee", "Tallahassee", "English", "South Eastern", 72147030));
        State.Add(new StateDetails("Texas", "Austin", "Austin", "English","South Central", 61095297));
        State.Add(new StateDetails("New Jersey", "Trenton", "Trenton", "English", "North Eastern", 6864602));
	}
}

{% endhighlight %}

{% endtabs %}

View sample in Github.

Binding the ItemsSource from ViewModel for the SfComboBox loaded inside the template column in Xamarin.Forms DataGrid

You can bind any collection to the SfComboBox.DataSource property, which is loaded inside the GridTemplateColumn using the below code snippet.

{% tabs %}

{% highlight xaml %}

<ContentPage.BindingContext> <local:ViewModel x:Name="viewModel"/> </ContentPage.BindingContext> <ContentPage.Content > <sfgrid:SfDataGrid ItemsSource="{Binding State}" NavigationMode="Cell" ColumnSizer="Auto" SelectionMode="Multiple" AutoGenerateColumns="True"> sfgrid:SfDataGrid.Columns <sfgrid:GridTemplateColumn MappingName="Province"> sfgrid:GridTemplateColumn.CellTemplate <combobox:SfComboBox BindingContext="{x:Reference viewModel}" DataSource="{Binding StatesProvince}" WidthRequest="150" IsEditableMode="True" /> </sfgrid:GridTemplateColumn.CellTemplate> </sfgrid:GridTemplateColumn> </sfgrid:SfDataGrid.Columns> </sfgrid:SfDataGrid> </ContentPage.Content>

{% endhighlight %}

{% highlight c# %}

// ViewModel.cs

class ViewModel : INotifyPropertyChanged {
private ObservableCollection states = new ObservableCollection(); private ObservableCollection stateProvince = new ObservableCollection(); public ObservableCollection StatesProvince { get { return stateProvince; } set { stateProvince = value; OnPropertyChanged(nameof(StatesProvince));} } public ObservableCollection State { get { return states; } set{states = value;} } public ViewModel() { AddProvince(); AddStateDetails(); } private void AddProvince() { StatesProvince.Add("South Central"); StatesProvince.Add("Eastern"); StatesProvince.Add("North Eastern"); StatesProvince.Add("Northern"); StatesProvince.Add("South Eastern"); StatesProvince.Add("Western"); }

	public void AddStateDetails()
    {
        State.Add(new StateDetails("California", "Sacramento ", "Sacramento", "English", "Western", 49506799));
        State.Add(new StateDetails("Florida", "Tallahassee", "Tallahassee", "English", "South Eastern", 72147030));
        State.Add(new StateDetails("Texas", "Austin", "Austin", "English","South Central", 61095297));
        State.Add(new StateDetails("New Jersey", "Trenton", "Trenton", "English", "North Eastern", 6864602));
	}
}

{% endhighlight %}

{% endtabs %}

View sample in Github.

Hide column in button click using MVVM in Xamarin.Forms DataGrid

Bind any bool property in the view model to the GridColumn.IsHidden property. Refer the below code snippet where we have bound a command to a button click where we change the value of the bound bool property to hide/unhide a column.

{% tabs %}

{% highlight xaml %}

<ContentPage.BindingContext> <local:ViewModel x:Name="viewModel"/> </ContentPage.BindingContext> <ContentPage.Content > <sfgrid:SfDataGrid ItemsSource="{Binding State}" NavigationMode="Cell" ColumnSizer="Auto" AutoGenerateColumns="True"> sfgrid:SfDataGrid.Columns <sfgrid:GridNumericColumn MappingName="Population" IsHidden="{Binding IsHidden}"/> </sfgrid:SfDataGrid.Columns> </sfgrid:SfDataGrid> </ContentPage.Content>

{% endhighlight %}

{% highlight c# %}

// ViewModel.cs

class ViewModel : INotifyPropertyChanged {

    public ICommand HideColumnCommand { get; set; }
	private bool isHidden;
	public bool IsHidden
    {
        get { return isHidden; }
        set { isHidden = value;
            OnPropertyChanged("IsHidden");
        }
    }
    
	public ViewModel()
	{
	    IsHidden = false;
        HideColumnCommand = new Command(HideOrUnHideColumn);
	}
	
	private void HideOrUnHideColumnColumn()
    {
        IsHidden = !IsHidden;
		OnPropertyChanged(nameof(IsHidden));
    }
}

{% endhighlight %}

{% endtabs %}

View sample in Github.

Filtering in DataGrid using MVVM

You can refer here, to know how to apply filtering in SfDataGrid using MVVM.

Interaction commands in Xamarin.Forms DataGrid

The SfDataGrid provides command support for all the interactions such as tap, double tap and long press to support MVVM. Refer here to know about the available interaction commands.

Binding values to grid style in MVVM

SfDatagrid allows you to bind values to the properties of grid style class from view model or directly set from application resources as shown here.

N> You can refer to our Xamarin DataGrid feature tour page for its groundbreaking feature representations. You can also explore our Xamarin.Forms DataGrid example to knows various chart types and how to easily configured with built-in support for creating stunning visual effects.