How can I help you?
Add New Row in MAUI DataGrid (SfDataGrid)
9 Sep 202524 minutes to read
DataGrid provides built-in row (called AddNewRow) that allows user to add new records to underlying collection. Built-in add new row can be enabled or disabled by setting SfDataGrid.AddNewRowPosition property. AddNewRowPosition also denotes the position of add new row in DataGrid.
When you start editing in AddNewRow, the SfDataGrid control creates an instance for the underlying data object and adds it to underlying collection when editing completed.
NOTE
- The underlying data object must be defined with default constructor.
- Selection and Editing must be enabled.
<syncfusion:SfDataGrid x:Name="dataGrid"
AddNewRowPosition="Top"
SelectionMode="Single"
NavigationMode="Cell"
AllowEditing="True"
AutoGenerateColumnsMode="None"
ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:DataGridNumericColumn HeaderText="Order ID" Format="#"
MappingName="OrderID" />
<syncfusion:DataGridTextColumn HeaderText="Customer ID"
MappingName="CustomerID.CustomerID" />
<syncfusion:DataGridTextColumn HeaderText="Ship City"
MappingName="ShipCity" />
<syncfusion:DataGridTextColumn HeaderText="Ship Country"
MappingName="ShipCountry" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
dataGrid.SelectionMode = DataGridSelectionMode.Single;
dataGrid.NavigationMode = DataGridNavigationMode.Cell;
dataGrid.AllowEditing = true;
dataGrid.AddNewRowPosition = DataGridAddNewRowPosition.Top;
}
}
Changing the AddNewRow position
The position of the AddNewRow in SfDataGrid can be customized using the SfDataGrid.AddNewRowPosition property. By default, this property is set to Top.
The following code snippet demonstrates how to change the AddNewRow position to Bottom in SfDataGrid:
<syncfusion:SfDataGrid x:Name="dataGrid"
AddNewRowPosition="Bottom"
AddNewRowText="Click here to add new row in datagrid"
SelectionMode="Single"
NavigationMode="Cell"
AllowEditing="True"
AutoGenerateColumnsMode="None"
ItemsSource="{Binding OrderInfoCollection}">
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
dataGrid.SelectionMode = DataGridSelectionMode.Single;
dataGrid.NavigationMode = DataGridNavigationMode.Cell;
dataGrid.AllowEditing = true;
dataGrid.AddNewRowPosition = DataGridAddNewRowPosition.Bottom;
dataGrid.AddNewRowText = "Click here to add new row in datagrid";
}
}
Customize the newly added row position
SfDataGrid adds new data item from AddNewRow at the end of collection. When data operations (sorting, grouping) performed, the new item added based on data operations. You can customize the newly added data item position by setting SfDataGrid.NewItemPlaceHolderPosition.
<syncfusion:SfDataGrid x:Name="dataGrid"
AddNewRowPosition="Top"
SelectionMode="Single"
NavigationMode="Cell"
AllowEditing="True"
NewItemPlaceholderPosition="AtBeginning"
ItemsSource="{Binding OrderInfoCollection}">
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
dataGrid.SelectionMode = DataGridSelectionMode.Single;
dataGrid.NavigationMode = DataGridNavigationMode.Cell;
dataGrid.AllowEditing = true;
dataGrid.AddNewRowPosition = DataGridAddNewRowPosition.Top;
dataGrid.NewItemPlaceholderPosition = Syncfusion.Maui.Data.NewItemPlaceholderPosition.AtBeginning;
}
}Changing the AddNewRow default text
You can change the default static string of AddNewRow in datagrid by using the SfDataGrid.AddNewRowText property. The AddNewRowText property has higher priority than the text that is localized in resx file.
<syncfusion:SfDataGrid x:Name="dataGrid"
AddNewRowPosition="Top"
AddNewRowText="Click here to add new row in datagrid"
SelectionMode="Single"
NavigationMode="Cell"
AllowEditing="True"
AutoGenerateColumnsMode="None"
ItemsSource="{Binding OrderInfoCollection}">
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
dataGrid.SelectionMode = DataGridSelectionMode.Single;
dataGrid.NavigationMode = DataGridNavigationMode.Cell;
dataGrid.AllowEditing = true;
dataGrid.AddNewRowPosition = DataGridAddNewRowPosition.Top;
dataGrid.AddNewRowText = "Click here to add new row in datagrid";
}
}
Initializing default values for AddNewRow
SfDataGrid allows you to set the default values for AddNewRow while initiating, through DataGridAddNewRowInitiatingEventArgs.Object property in SfDataGrid.AddNewRowInitiating event.
<syncfusion:SfDataGrid x:Name="dataGrid"
AddNewRowPosition="Top"
AddNewRowInitiating="DataGrid_AddNewRowInitiating"
SelectionMode="Single"
NavigationMode="Cell"
AllowEditing="True"
ItemsSource="{Binding OrderInfoCollection}">
</syncfusion:SfDataGrid>this.dataGrid.AddNewRowInitiating += DataGrid_AddNewRowInitiating;
private void dataGrid_AddNewRowInitiating(object? sender, DataGridAddNewRowInitiatingEventArgs e)
{
var data = e.Object as OrderInfo;
if(data != null)
{
data.OrderID = 101;
}
}
Working with complex properties in AddNewRow
SfDataGrid control does not initiate values for complex properties defined in the data object. Hence, you need to initiate the default values for the complex properties externally by using the SfDataGrid.AddNewRowInitiating event.
<syncfusion:SfDataGrid x:Name="dataGrid"
AddNewRowPosition="Top"
AutoGenerateColumnsMode="None"
SelectionMode="Single"
NavigationMode="Cell"
AllowEditing="True"
AddNewRowInitiating="DataGrid_AddNewRowInitiating"
ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:DataGridNumericColumn HeaderText="Order ID" Format="#"
MappingName="OrderID" />
<syncfusion:DataGridTextColumn HeaderText="Customer ID"
MappingName="CustomerID.CustomerID" />
<syncfusion:DataGridTextColumn HeaderText="Ship City"
MappingName="ShipCity" />
<syncfusion:DataGridTextColumn HeaderText="Ship Country"
MappingName="ShipCountry" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>this.dataGrid.AddNewRowInitiating += DataGrid_AddNewRowInitiating;
private void DataGrid_AddNewRowInitiating(object? sender, DataGridAddNewRowInitiatingEventArgs e)
{
var data = e.Object as OrderInfo;
if(data != null)
{
data.OrderID = 101;
data.CustomerID = new CustomerInfo();
}
}Add row programmatically
You can commit or cancel the new record in AddNewRow by pressing the Enter and Esc key respectively. AddNewRow operations can be performed programmatically by using DataGridAddNewRowController.CommitAddNew and DataGridAddNewRowController.CancelAddNew methods at runtime.
Cancel AddNewRow
if (this.dataGrid.View.IsAddingNew)
{
//Which end edit the current cell and revert the entered value.
if (this.dataGrid.CurrentCellManager.DataColumn.IsEditing)
this.dataGrid.EndEdit();
var addNewRowController = this.dataGrid.AddNewRowController;
addNewRowController.CancelAddNew();
}Commit AddNewRow
if (this.dataGrid.View.IsAddingNew)
{
if (this.dataGrid.CurrentCellManager.DataColumn.IsEditing)
this.dataGrid.EndEdit();
RowColumnIndex rowColumnIndex = this.dataGrid.CurrentCellManager.RowColumnIndex;
//Process the commit operation in AddNewRow.
var addNewRowController = this.dataGrid.AddNewRowController;
addNewRowController.CommitAddNew(dataGrid);
//Gets the row index of AddNewRow
rowColumnIndex.RowIndex = addNewRowController.GetAddNewRowIndex(dataGrid);
this.dataGrid.SelectedRows.Clear();
//If the AddNewRowPosition is Top need to move the current cell to next row
if (this.dataGrid.AddNewRowPosition == DataGridAddNewRowPosition.Top)
rowColumnIndex.RowIndex = rowColumnIndex.RowIndex + 1;
//Which retains the current cell border in the row after canceling AddNewRow as you press ESC key operation.
this.dataGrid.MoveCurrentCellTo(rowColumnIndex);
}Customizing AddNewRow text using default resource file
SfDataGrid enables you to customize the watermark text of AddNewRow by changing value of AddNewRowText in Resource Designer.
To customize the AddNewRowText, add the default Syncfusion.SfDataGrid.WPF.resx file in Resources folder and then customize the value of AddNewRowText. Refer here to learn more about localization.
Customizing AddNewRow
Apply implicit style
DataGridAddNewRow can be customized by writing style for DataGridAddNewRowView TargetType.
<ContentPage.Resources>
<Style TargetType="syncfusion:DataGridAddNewRowView">
<Setter Property="Background"
Value="#0074E3" />
<Setter Property="TextColor"
Value="White" />
<Setter Property="FontAttributes"
Value="Italic" />
<Setter Property="FontSize"
Value="24" />
<Setter Property="FontFamily"
Value="TimesNewRoman" />
</Style>
</ContentPage.Resources>Apply default style
You can customize the AddNewRow’s Background, TextColor, FontAttribute, FontFamily by using SfDataGrid.DefaultStyle.
<syncfusion:SfDataGrid x:Name="dataGrid"
AddNewRowPosition="Top"
SelectionUnit="Row"
SelectionMode="Single"
NavigationMode="Cell"
AllowEditing="True"
AutoGenerateColumnsMode="None"
ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.DefaultStyle>
<syncfusion:DataGridStyle AddNewRowBackground="#0074E3"
AddNewRowTextColor="White"
AddNewRowFontAttributes="Italic"
AddNewRowFontSize="24"
AddNewRowFontFamily="TimesNewRoman" />
</syncfusion:SfDataGrid.DefaultStyle>
</syncfusion:SfDataGrid>
AddNewRow support in Master-Details View
You can enable the AddNewRow in DetailsViewDataGrid by specifying the position to SfDataGrid.AddNewRowPosition property in ViewDefinition.DataGrid.
<syncfusion:SfDataGrid x:Name="dataGrid"
AddNewRowPosition="Top"
AutoGenerateRelations="False"
SelectionMode="Single"
NavigationMode="Cell"
AllowEditing="True"
AutoGenerateColumnsMode="None"
ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:DataGridNumericColumn HeaderText="Order ID" Format="#"
MappingName="OrderID" />
<syncfusion:DataGridTextColumn HeaderText="Customer ID"
MappingName="CustomerID.CustomerID" />
<syncfusion:DataGridTextColumn HeaderText="Ship City"
MappingName="ShipCity" />
<syncfusion:DataGridTextColumn HeaderText="Ship Country"
MappingName="ShipCountry" />
</syncfusion:SfDataGrid.Columns>
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:DataGridViewDefinition RelationalColumn="Customers">
<syncfusion:DataGridViewDefinition.DataGrid>
<syncfusion:SfDataGrid x:Name="firstLevelNestedGrid"
AutoGenerateColumnsMode="None"
AddNewRowPosition="Top">
<syncfusion:SfDataGrid.Columns>
<syncfusion:DataGridTextColumn MappingName="OrderID"
HeaderText="Order ID"
Format="#" />
<syncfusion:DataGridTextColumn MappingName="Quantity"
HeaderText="Quantity" />
<syncfusion:DataGridTextColumn MappingName="Status"
HeaderText="Status" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
</syncfusion:DataGridViewDefinition.DataGrid>
</syncfusion:DataGridViewDefinition>
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>this.firstLevelNestedGrid.AddNewRowPosition = DataGridAddNewRowPosition.Top;Similarly, you can wire AddNewRowInitiating event for ViewDefinition.DataGrid.
this.firstLevelNestedGrid.AddNewRowInitiating += FirstLevelNestedGrid_AddNewRowInitiating;
private void FirstLevelNestedGrid_AddNewRowInitiating(object? sender, DataGridAddNewRowInitiatingEventArgs e)
{
}For auto-generated relation (when the AutoGenerateRelations is set to true), the AddNewRow can be enabled by specifying the position to AddNewRowPosition property in AutoGeneratingRelations event.
this.dataGrid.AutoGeneratingRelations += DataGrid_AutoGeneratingRelations;
private void DataGrid_AutoGeneratingRelations(object? sender, DataGridAutoGeneratingRelationsArgs e)
{
e.DataGridViewDefinition.DataGrid.AddNewRowPosition = DataGridAddNewRowPosition.Top;
}In the same way, you can wire AddNewRowInitiating event in the AutoGeneratingRelations event.
this.dataGrid.AutoGeneratingRelations += DataGrid_AutoGeneratingRelations;
private void DataGrid_AutoGeneratingRelations(object? sender, DataGridAutoGeneratingRelationsArgs e)
{
e.DataGridViewDefinition.DataGrid.AddNewRowInitiating += DataGrid_AddNewRowInitiating;
}
private void DataGrid_AddNewRowInitiating(object? sender, DataGridAddNewRowInitiatingEventArgs e)
{
}
Changing the AddNewRow default text in details view grid
You can change the default static string of AddNewRow in details view grid by using the SfDataGrid.AddNewRowText property in ViewDefinition.DataGrid. The AddNewRowText property has higher priority than the text that is localized in resx file.
<syncfusion:SfDataGrid x:Name="dataGrid"
AddNewRowPosition="Top"
SelectionMode="Single"
NavigationMode="Cell"
AllowEditing="True"
AutoGenerateRelations="False"
AutoGenerateColumnsMode="None"
ItemsSource="{Binding OrderInfoCollection}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:DataGridNumericColumn HeaderText="Order ID" Format="#"
MappingName="OrderID" />
<syncfusion:DataGridTextColumn HeaderText="Customer ID"
MappingName="CustomerID.CustomerID" />
<syncfusion:DataGridTextColumn HeaderText="Ship City"
MappingName="ShipCity" />
<syncfusion:DataGridTextColumn HeaderText="Ship Country"
MappingName="ShipCountry" />
</syncfusion:SfDataGrid.Columns>
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:DataGridViewDefinition RelationalColumn="Customers">
<syncfusion:DataGridViewDefinition.DataGrid>
<syncfusion:SfDataGrid x:Name="firstLevelNestedGrid"
AddNewRowPosition="Top"
AddNewRowText="Click here to add new row in child grid"
AutoGenerateColumnsMode="None"
AddNewRowPosition="Top">
<syncfusion:SfDataGrid.Columns>
<syncfusion:DataGridTextColumn MappingName="OrderID"
HeaderText="Order ID"
Format="#" />
<syncfusion:DataGridTextColumn MappingName="Quantity"
HeaderText="Quantity" />
<syncfusion:DataGridTextColumn MappingName="Status"
HeaderText="Status" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
</syncfusion:DataGridViewDefinition.DataGrid>
</syncfusion:DataGridViewDefinition>
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>this.firstLevelNestedGrid.AddNewRowPosition = DataGridAddNewRowPosition.Top;
this.firstLevelNestedGrid.AddNewRowText = "Click here to add new row in child grid";