Inserting a New Row in GridView

Introduction

Many months back I wrote an article that explained a trick that allows you to add a new row to DataGrid. Just like DataGrid control the new GridView control doesn't allow you to add new rows. Developers often use the following techniques to add new rows in such case:

• They place a DetailsView control below the GridView. The users can add a new record via DetailsView and the new record is displayed in the GridView
• They have a hyperlink that takes the user to another web form where DetailsView is used to add a record. Once the record is added the control is taken back to the previous page

Both of these approach have drawbacks of their own. The first approach consumes more screen space even if you are adding only few records. So it is not a good option in "edit mostly add few times" scenarios. The second option calls for creating an extra web form and because of to and fro navigation more requests are sent to the server. In this article I am going to illustrate a quick way to solve the above problems.

The Solution

The GridView control provides a template called Empty Data Template. This template is displayed when there is no data to be displayed in the GridView. Normally this template is used to display a status message to the end user that there is no data to be displayed. However, you can use this template for any other purpose also. In this example you will use it to add a new record to the GridView.

Creating a Sample Web Form

Begin by creating a new web site in Visual Studio. Drag and drop an SQL Data Source control and configure it to select CustomerID, CompanyName, ContactName and Country columns from Customers table of Northwind database.

Make sure to choose Advanced button and select "Generate INSERT, UPDATE and DELETE" statements checkbox.

Now add a GridView control to the web form and set its DataSourceID property to SqlDataSource1. Also enable editing, deleting and paging for the grid. From the smart tag of the GridView select "Edit columns..." option.

Add a ButtonField to the grid and set its CommandName property to Insert. Users will click on Insert button to insert a new record.

Now right click on the GridView and choose Edit Template - Empty Data Template menu option. Drag and drop a DetailsView control inside Empty Data Template and set its DataSourceID property to SqlDataSource1.

Also set its DefaultMode property to Insert. This way when the Empty Data Template is displayed the DetailsView will be ready for insertion.

Now go in the code behind of the web form and write RowCommand event handler of GridView as shown below:

protected void GridView1_RowCommand
(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Insert")
{
GridView1.DataSourceID = "";
GridView1.DataBind();
}
}

Here we check if the CommandName of  GridViewCommandEventArgs class is Insert. If so we set DataSourceID property of GridView to empty string and call DataBind() method of GridView. This way the grid will not have any data and Empty Data Template will be displayed.

Now handle ItemInserted event of DetailsView control. The ItemInserted event is raised when DetailsView inserts a new record successfully. Write the following code inside the ItemInserted event handler:

protected void DetailsView1_ItemInserted
(object sender, DetailsViewInsertedEventArgs e)
{
GridView1.DataSourceID = "SqlDataSource1";
GridView1.DataBind();
}

Here we set DataSourceID property of GridView again to SqlDataSource1 and bind it again. This way the grid will reflect the newly inserted record.

The following screen shot shows our web form in action.

Summary

GridView control does not allow you to insert new rows. However, with the help of Empty Data Template and DetailsView you can play a clever trick to insert new records. This way you can save screen space as well as extra pages.