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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add and delete rows and columns in runtime?

Platform: Xamarin.Forms |
Control: SfDataGrid |
Published Date: November 18, 2015 |
Last Revised Date: August 18, 2021
Tags: crud

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

Add columns and rows at run time

 

Delete rows and columns at run time

 

Sample link:

Delete rows and columns at run time

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Arshdeep
Jan 24, 2019

hello,

Using the above sample, i able to add new columns and rows dynamically to the datagrid. But i am unable to get the cell values values of new columns added. Can you help me with this one asap.


Reply
Sivaraman Sivagurunathan [Syncfusion]
Jan 27, 2019

Hi Arshdeep,

 

We have checked your query. you can achieved your requirement by SfDataGrid.View.Records.CollectionChanged and SfDataGrid.Columns.CollectionChanged event. We have pared the sample based on your requirement and attached for your reference you can download the same from the following link and code snippet.

 

 

dataGrid.View.Records.CollectionChanged += Records_CollectionChanged;

 

private void Records_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)

{

    var recordIndex = this.dataGrid.ResolveToRowIndex(e.NewItems[0]);

    var rowIndex = this.dataGrid.ResolveToRowIndex(recordIndex);

    var data = this.dataGrid.GetRecordAtRowIndex(rowIndex);

}

 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGridDemo-1364539700

 

Regards,

Sivaraman

Jawad
Mar 23, 2020

Hello, where does the "Info" in line 14 comes from?

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile