Its been a while since I did some custom work on controls like GridView, DataGrid etc. Last
week I was working on a prototype of some application that required me to add some records into the
database. So I decided to give GridView control in ASP.Net a try. I needed a very simple
UI so I decided to use as much built in functionality of this control. Since I needed to add a new
record, so I needed a way to be able to add a new row into GridView. So I looked at the
CommandField column. One of the properties it has is ShowInsertButton . So
I added this property and set it to true. So now my mark up on ASP.Net on the page looked as shown
below.
<Columns>
<asp:CommandField ShowEditButton="True"
ShowDeleteButton="true"
ShowInsertButton="true"></asp:CommandField>
.... othe bound columns.
</Columns>
I ran the application and my grid shows up and has all three data manipulation links visible. So I clicked on
New link button. Well, I did not see an empty row appear where I was going to add new data for
new row in database. I checked, everything looked in order. I have event handler correctly mapped and
code looked fine. After trying few things around, I searched on internet. I could not find any
useful information on why my event is not firing or why new row is not getting added. All the posts and articles
that I ran into talked about adding a new button in the grid to accomplish taks of added new records. Well
that sounded a little odd that why would I need to add my own button when there is already a command
link buttoon available. Thats when I decided to read the documentation on this property ShowInsertButton.
Here is something in documentation that stood out.
This property applies only to data-bound controls that support insert operations, such as the DetailsView control.
When you look at various events in GridView control, you will not find any related to
Insert. Now that explained why I am not getting new row added to my grid.
Adding new row to GridView
So here is quick solution that I came up with for my prototype. When you click on New
link button in GridView, it does fire RowCommand event. Here you can check for
CommandName value of New. In this event handler, I added a new empty
record into the data source to which my GridView was bound, set the EditIndex of the
grid to first record and bind the grid again. Now I have an empty row in Edit mode open for me to
add some data.
if (e.CommandName == "New")
{
ViewState["_inserting_"] = 1;
var glossaryTerm = new Services.GlossaryTerm();
_terms.Insert(0, glossaryTerm);
GlossaryGrid.EditIndex = 0;
BindGrid();
}
You can see that I added a flag in ViewState that grid is in Insert mode. The reason
for this is that since GridView does not support Insert directly, when you
will click on Update link button, you are going to get RowUpdated event
handed to you. So you will need some way of knowing that this record is actually to be added and not edit
some existing one. The way I did is not one of the best and elegant way. But you get the idea. One nice
of doing is to have an hidden field where some unique ID of each record is stored. And you can keep
this field hidden. Since I did not have any unique ID in my data source, I had to do it
differently. But most grids are bound to some data source with some unique ID. So when you add a new
empty record for adding, you can set its Unique ID value to some token valur like -1. When you
handle RowUpdated event, then you can look for this unique ID value and perform
the database accordingly.
This trick should allow you to use built in command buttons to add new row in GridView.
