Tutorial: Add or Remove Rows

• Jul 21, 2020
• 3 minutes to read

This walkthrough is a transcript of the Add or Remove Rows video available on the DevExpress YouTube Channel.

This tutorial describes the grid control’s UI elements and API that enable you and end-users to add or remove data rows. You will first learn how to enable the built-in Data Navigator, then how to use the Microsoft Outlook inspired New Item row to add new records. Finally, the walkthrough will show you the basic API that enables you to add or delete rows, and also initialize field values when end-users add records using the grid control’s UI.

Activating and Using Data Navigator

First, you can enable end-users to add and delete rows using an embedded navigator control. To do this, set the GridControl.UseEmbeddedNavigator property to true.

The navigator appears at the left-bottom corner. Run the application to see what can be done using the navigator. Click the Append button to add a row.

After you’ve done initializing cell values, you can post changes using the End Edit button.

Note that there’s also the Cancel Changes button available. To delete rows, simply click the Delete button.

Enabling and Using New Item Row

Another way to add new rows is by using the New Item row. To enable it, expand GridView.OptionsView and set the GridOptionsView.NewItemRowPosition property to NewItemRowPosition.Top.

The New Item row is now displayed at the top of the grid. Run the application. Click the row, initialize cell values and post the changes, which can be done by moving row focus or by pressing ENTER when the last row cell is focused.

You can use the ESCAPE key to cancel adding a new row. If you’re editing a cell, the first key press will discard changes to that cell. Press ESCAPE again to remove the entire row.

Using the same property, you can position the New Item row after all other records. In a similar fashion, you can start editing this row and then post the changes to create a new record.

Adding and Removing Rows in Code

To facilitate end-user input, you may want to predefine cell values in newly added rows. For this purpose, handle the ColumnView.InitNewRow event, which fires whenever a row is being added using the grid control’s UI. Use the event’s InitNewRowEventArgs.RowHandle parameter to identify the row being added and write the current date and time into a cell.

C#

private void gridView1_InitNewRow(object sender, InitNewRowEventArgs e) {
    GridView view = sender as GridView;
    view.SetRowCellValue(e.RowHandle, "Date", DateTime.Now.Date);
}

VB.NET

Private Sub gridView1_InitNewRow(ByVal sender As Object, ByVal e As InitNewRowEventArgs)
    Dim view As GridView = TryCast(sender, GridView)
    view.SetRowCellValue(e.RowHandle, "Date", DateTime.Now.Date)
End Sub

You may also need to provide custom UI for adding or deleting rows, like the Add Row ribbon button in this example. In the Click event handler, call the View’s GridView.AddNewRow method. Similarly, you can add the Delete Row button, whose Click handler should call the ColumnView.DeleteRow method to delete the currently focused row.

C#

private void bAddRow_ItemClick(object sender, ItemClickEventArgs e) {
    gridView1.AddNewRow();
}

private void bRemoveRow_ItemClick(object sender, ItemClickEventArgs e) {
    gridView1.DeleteRow(gridView1.FocusedRowHandle);
}

VB.NET

Private Sub bAddRow_ItemClick(ByVal sender As Object, ByVal e As ItemClickEventArgs)
    gridView1.AddNewRow()
End Sub

Private Sub bRemoveRow_ItemClick(ByVal sender As Object, ByVal e As ItemClickEventArgs)
    gridView1.DeleteRow(gridView1.FocusedRowHandle)
End Sub

Run the application and click the Add Row button. You can see that the Date field value is automatically initialized with the current date. Now focus the newly added row and click the Delete button to remove it.