Add and Remove Rows

• Jun 11, 2019
• 7 minutes to read

New Item Row

The New Item Row is an empty row at the top or the bottom of the View. Users can enter data into this row to create new rows.

Note

The TreeListView supports the New Item Row from v19.1.

To show the New Item Row, set the TableView.NewItemRowPosition / TreeListView.NewItemRowPosition property to Top or Bottom.

TableView: NewItemRowPosition = Top

TableView: NewItemRowPosition = Bottom

TreeListView: NewItemRowPosition = Top

TreeListView: NewItemRowPosition = Bottom

Tip

Demos:

• New Item Row in TableView
• New Item Row in TreeListView

Requires installation of WPF Subscription. Download

Tip

GitHub Example: How to Add a New Row using the New Item Row

A user should enter values in the New Item Row. The GridControl checks whether values are valid and displays the row at the place according to the current filter, group, and sort settings:

Tip

The GridControl validates the New Item Row‘s cells in the same way as other data cells. Refer to Input Validation for more information.

In TreeListView, a new row is added to the root level. Users can drag this row anywhere in the hierarchy. Set the DataViewBase.AllowDragDrop property to true to allow drag-and-drop operations.

Users can press Esc while the row is focused to cancel appending a new row.

If a cell is in edit mode, a user should press the Esc key twice to close an editor and cancel appending.

Tip

You can customize the New Item Row that has the NewItemRowPosition.Top position. Use the ColumnBase.NewItemRowCellStyle / TableView.NewItemRowCellStyle / TreeListView.NewItemRowCellStyle property to specify a style for the column cell(s) within the New Item Row.

Initialize New Item Row

You can initialize the New Item Row with default values:

Tip

GitHub Example: How to: Initialize the New Item Row with Default Values

GridViewBase.AddingNewRow / TreeListView.AddingNewNode Event	TableView.InitNewRow / TreeListView.InitNewNode Event
Occurs before a new row is added to the View.	Occurs before a new row is added to the View.
Use this event to create a new row instance.	Use this event to set field values within the New Item Row.
XAML <dxg:GridControl Name="grid"> <dxg:GridControl.View> <dxg:TableView Name="view" NewItemRowPosition="Top" AddingNewRow="view_AddingNewRow" /> </dxg:GridControl.View> </dxg:GridControl> View Model C# public class ViewModel { public ViewModel() { CreateList(); } public ObservableCollection<Person> PersonList { get; set; } void CreateList() { PersonList = new ObservableCollection<Person>(); for (int i = 0; i < 3; i++) { Person p = new Person(i); PersonList.Add(p); } } } public class Person { public Person(int i) { ProductName = "ProductName" + i; CompanyName = "CompanyName" + i; UnitPrice = i; Discontinued = i % 2 == 0; } public string ProductName { get; set; } public string CompanyName { get; set; } public int UnitPrice { get; set; } public bool Discontinued { get; set; } } VB.NET Public Class ViewModel Public Sub New() CreateList() End Sub Public Property PersonList As ObservableCollection(Of Person) Private Sub CreateList() PersonList = New ObservableCollection(Of Person)() For i As Integer = 0 To 3 - 1 Dim p As Person = New Person(i) PersonList.Add(p) Next End Sub End Class Public Class Person Public Sub New(ByVal i As Integer) ProductName = "ProductName" & i CompanyName = "CompanyName" & i UnitPrice = i Discontinued = i Mod 2 = 0 End Sub Public Property ProductName As String Public Property CompanyName As String Public Property UnitPrice As Integer Public Property Discontinued As Boolean End Class C# void view_AddingNewRow(object sender, AddingNewEventArgs e) { e.NewObject = new Person(1); } VB.NET Private Sub view_AddingNewRow(ByVal sender As Object, ByVal e As AddingNewEventArgs) e.NewObject = New Person(1) End Sub	XAML <dxg:GridControl Name="grid"> <dxg:GridControl.View> <dxg:TableView Name="view" NewItemRowPosition="Top" InitNewRow="view_InitNewRow" /> </dxg:GridControl.View> </dxg:GridControl> View Model C# public class ViewModel { public ViewModel() { CreateList(); } public ObservableCollection<Person> PersonList { get; set; } void CreateList() { PersonList = new ObservableCollection<Person>(); for (int i = 0; i < 3; i++) { Person p = new Person(i); PersonList.Add(p); } } } public class Person { public Person(int i) { ProductName = "ProductName" + i; CompanyName = "CompanyName" + i; UnitPrice = i; Discontinued = i % 2 == 0; } public string ProductName { get; set; } public string CompanyName { get; set; } public int UnitPrice { get; set; } public bool Discontinued { get; set; } } VB.NET Public Class ViewModel Public Sub New() CreateList() End Sub Public Property PersonList As ObservableCollection(Of Person) Private Sub CreateList() PersonList = New ObservableCollection(Of Person)() For i As Integer = 0 To 3 - 1 Dim p As Person = New Person(i) PersonList.Add(p) Next End Sub End Class Public Class Person Public Sub New(ByVal i As Integer) ProductName = "ProductName" & i CompanyName = "CompanyName" & i UnitPrice = i Discontinued = i Mod 2 = 0 End Sub Public Property ProductName As String Public Property CompanyName As String Public Property UnitPrice As Integer Public Property Discontinued As Boolean End Class C# void view_InitNewRow(object sender, InitNewRowEventArgs e) { grid.SetCellValue(e.RowHandle, "CompanyName", "New Company"); grid.SetCellValue(e.RowHandle, "UnitPrice", 10); grid.SetCellValue(e.RowHandle, "Discontinued", false); } VB.NET Private Sub view_InitNewRow(ByVal sender As Object, ByVal e As InitNewRowEventArgs) grid.SetCellValue(e.RowHandle, "CompanyName", "New Company") grid.SetCellValue(e.RowHandle, "UnitPrice", 10) grid.SetCellValue(e.RowHandle, "Discontinued", False) End Sub

Note

The GridControl creates a new row instance if the datasource allows you to add new rows and the object provides a constructor without parameters. Otherwise, handle the GridViewBase.AddingNewRow / TreeListView.AddingNewNode event and specify the NewObject property.

Note

In the TreeListView in Self-Referential mode, you cannot add the New Item Row with the duplicated primary key. Handle the TreeListView.InitNewNode / TreeListView.AddingNewNode event and initialize a field specified in the TreeListView.KeyFieldName property with a unique primary key.

Code Sample

Xaml

<dxg:TreeListView x:Name="view" KeyFieldName="ID" ParentFieldName="ParentID"
    NewItemRowPosition="Bottom" InitNewNode="OnInitNewNode" /> 

C#

void OnInitNewNode(object sender, DevExpress.Xpf.Grid.TreeList.TreeListNodeEventArgs e) {
    view.SetNodeValue(e.Node, "ID", view.TotalNodesCount + 1);
    // ...
} 

VB.NET

Private Sub OnInitNewNode(ByVal sender As Object, ByVal e As DevExpress.Xpf.Grid.TreeList.TreeListNodeEventArgs)
    view.SetNodeValue(e.Node, "ID", view.TotalNodesCount + 1)
    ' ...
End Sub 

Data Navigator

The embedded Data Navigator allows users to add and remove rows.

To show the Data Navigator, set the TableView.ShowDataNavigator / TreeListView.ShowDataNavigator property to true.

To add a new row, a user should click the Data Navigator‘s Append (+) button.

To remove a row, a user should focus the row and click the Data Navigator‘s Delete (-) button.

Tip

You can initialize a new row with default values. Refer to the Initialize New Item Row section for more information.

Tip

Use the DataViewBase.DataNavigatorButtons property to specify which buttons to display in the Data Navigator.

Add and Remove Rows in Code

Add Rows

1. Call the TableView.AddNewRow / TreeListView.AddNewNode method to add a new row.

   If the New Item Row is enabled, these methods move focus to this element. Otherwise, they temporarily add an empty row at the bottom.

   Tip

   Commands: TableViewCommands.AddNewRow / TreeListViewCommands.AddNewNode

   Xaml

   <dxg:GridControl x:Name="grid" AutoGenerateColumns="AddNew" ItemsSource="{Binding PersonList}">
       <dxg:GridControl.View>
           <dxg:TableView x:Name="view"/>
       </dxg:GridControl.View>
   </dxg:GridControl>
   <!-- -->
   <Button Click="addNewRow">Add a New Row</Button> 
   

   C#

   void addNewRow(object sender, RoutedEventArgs e) {
       view.AddNewRow();
   }
   

   VB.NET

   Private Sub addNewRow(ByVal sender As Object, ByVal e As RoutedEventArgs)
       view.AddNewRow()
   End Sub
   

2. Use the DataControlBase.NewItemRowHandle to get the new row and set its values.

   Tip

   Topic: Obtain and Set Cell Values

   C#

   void addNewRow(object sender, RoutedEventArgs e) {
       view.AddNewRow();
       int newRowHandle = DataControlBase.NewItemRowHandle;
       grid.SetCellValue(newRowHandle, "ProductName", "New Product");
       grid.SetCellValue(newRowHandle, "CompanyName", "New Company");
       grid.SetCellValue(newRowHandle, "UnitPrice", 10);            
       grid.SetCellValue(newRowHandle, "Discontinued", false);
   } 
   

   VB.NET

   Private Sub addNewRow(ByVal sender As Object, ByVal e As RoutedEventArgs)
       view.AddNewRow()
       Dim newRowHandle As Integer = DataControlBase.NewItemRowHandle
       grid.SetCellValue(newRowHandle, "ProductName", "New Product")
       grid.SetCellValue(newRowHandle, "CompanyName", "New Company")
       grid.SetCellValue(newRowHandle, "UnitPrice", 10)
       grid.SetCellValue(newRowHandle, "Discontinued", False)
   End Sub
   

After values are set and accepted, the new row moves according to the current filter, group, and sort settings.

Tip

GitHub Example: How to Add and Remove Rows in Code

Remove Rows

Call the GridViewBase.DeleteRow / TreeListView.DeleteNode method to delete the specified row. The row is identified by its handle - a non negative integer value.

Tip

Command: DataViewCommandsBase.DeleteFocusedRow

Tip

Topic: Obtain Row Handles

XAML

<dxg:GridControl x:Name="grid" AutoGenerateColumns="AddNew" ItemsSource="{Binding PersonList}">
    <dxg:GridControl.View>
        <dxg:TableView x:Name="view"/>
    </dxg:GridControl.View>
</dxg:GridControl>
<!-- -->
<Button Click="deleteRow">Delete the Focused Row</Button>

C#

void deleteRow(object sender, RoutedEventArgs e) {
    view.DeleteRow(view.FocusedRowHandle);
}

VB.NET

Private Sub deleteRow(ByVal sender As Object, ByVal e As RoutedEventArgs)
    view.DeleteRow(view.FocusedRowHandle)
End Sub

Tip

GitHub Example: How to Add and Remove Rows in Code