|
Developer's Guide to ASP.NET 3.5 |
|
Master ASP.NET 3.5 development using C# and Visual Studio.NET 2008. Web forms, server controls, data binding, AJAX, ASMX and WCF services and more... |
|
|
Beat stress - learn Kriya Yoga Meditations |
|
A six week online course in our style of Kriya Yoga is available absolutely FREE. Very few websites teach you the ancient art and science of Kriya Yoga in such a systematic and authentic manner. |
|
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.