Category / Section
How to add and delete rows and columns in runtime in Xamarin.Forms DataGrid?
2 mins read
SfDataGrid allows you to add or delete rows and columns from the ItemsSource in run time. When you set the ItemsSource of the grid with a collection that implements the INotifyCollectionChanged interface then the SfDataGrid automatically refreshes the view against the CRUD operations.
Refer the below code example in which the SfDataGrid is set with an ObservableCollection as ItemsSource. The ObservableCollection implements the INotifyCollectionChanged interface and hence will result in automatic refreshing of view when adding or removing rows or columns in runtime.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sfgrid="clrnamespace:Syncfusion.SfDataGrid.XForms;
assembly=Syncfusion.SfDataGrid.XForms"
xmlns:local ="clr-namespace:AddDeleteRowColumn;
assembly=AddDeleteRowColumn"
x:Class="AddDeleteRowColumn.MainPage">
<ContentPage.BindingContext>
<local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<sfgrid:SfDataGrid x:Name="dataGrid"
ItemsSource="{Binding Info}"
ColumnSizer="Star"
Grid.Row="1">
<sfgrid:SfDataGrid.Columns x:TypeArguments="sfgrid:Columns">
<sfgrid:GridTextColumn MappingName="ID" />
<sfgrid:GridTextColumn MappingName="Name" />
<sfgrid:GridTextColumn MappingName="Percentage" />
<sfgrid:GridTextColumn MappingName="Result" />
<sfgrid:GridTextColumn MappingName="Remarks" />
</sfgrid:SfDataGrid.Columns>
</sfgrid:SfDataGrid>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="35"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="60"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"></ColumnDefinition>
<ColumnDefinition Width=".5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label x:Name="I" Grid.Row="0" Grid.Column="0"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
Text="Enter Index"/>
<Entry x:Name="Index" Grid.Row="0" Grid.Column="1" Keyboard="Numeric"
WidthRequest="250" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" Placeholder="Row/Column Index"/>
<Button x:Name="AddRowButton" Grid.Row="1" Grid.Column="0" Text="Add New Row"
Clicked="AddRowButton_Clicked"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
<Button x:Name="DeleteRowButton" Grid.Row="1" Grid.Column="1" Text="Delete Row"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
Clicked="DeleteRowButton_Clicked"/>
<Button x:Name="AddColumnButton" Grid.Row="2" Grid.Column="0"
Text="Add New Column" Clicked="AddColumnButton_Clicked"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
<Button x:Name="DeleteColumnButton" Grid.Row="2" Grid.Column="1"
Text=" Delete Column" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" Clicked="DeleteColumnButton_Clicked"/>
</Grid>
</Grid>
</ContentPage>
Refer the following code example to add or remove rows and columns in SfDataGrid at runtime.
private void AddRowButton_Clicked(object sender, EventArgs e)
{
if (Index.Text != null && Convert.ToInt32(Index.Text) < (this.viewModel.Info.Count)
&& Convert.ToInt32(Index.Text) >= 0)
{
Model newItem = new Model()
{
ID = 0,
Name = "ADDED ROW",
Percentage = 65,
Result = "Sample",
Remarks = "Sample"
};
this.viewModel.Info.Insert(Convert.ToInt32(Index.Text), newItem);
}
else
Index.Text = "";
}
private void DeleteRowButton_Clicked(object sender, EventArgs e)
{
if (Index.Text != null && Convert.ToInt32(Index.Text) < (this.viewModel.Info.Count)
&& Convert.ToInt32(Index.Text) >= 0)
this.viewModel.Info.RemoveAt(Convert.ToInt32(Index.Text));
else
Index.Text = "";
}
private void DeleteColumnButton_Clicked(object sender, EventArgs e)
{
if (Index.Text != null && Convert.ToInt32(Index.Text) < (dataGrid.Columns.Count)
&& Convert.ToInt32(Index.Text) >= 0)
dataGrid.Columns.RemoveAt(Convert.ToInt32(Index.Text));
else
Index.Text = "";
}
private void AddColumnButton_Clicked(object sender, EventArgs e)
{
if (Index.Text != null && Convert.ToInt32(Index.Text) < (dataGrid.Columns.Count)
&& Convert.ToInt32(Index.Text) >= 0)
{
var col = new GridTextColumn()
{
MappingName = "AddedColumn",
HeaderText = "AddedColumn"
};
dataGrid.Columns.Insert(Convert.ToInt32(Index.Text), col);
}
else
Index.Text = "";
}
When the ItemsSource of the grid is set with a collection that does not implement the interface INotifyCollectionChanged interface, then the grid has to be manually refreshed for runtime changes.
The following screenshots shows the final outcome upon execution of the above code
Sample link:
