Editing a DataGrid Control
page 1 of 1
Published: 05 Nov 2003
Unedited - Community Contributed
Abstract
Modifying and editing records in a table is as simple as that with the help of an editable DataGrid. In this article we will see what we need to create an editable DataGrid.
by Jesudas Chinnathampi (Das)
Feedback
Average Rating: 
Views (Total / Last 10 Days): 118904/ 60

Editing a DataGrid Control

Written on: Mar, 6th 2002.
Introduction

Modifying and editing records in a table is as simple as that with the help of editable DataGrid. In this article we will see what we need to create an editable DataGrid. Let us start with the DataGrid declaration.

Declaring a Datagrid Server Control
 
<ASP:DataGrid id="MyDataGrid" runat="server"
ShowFooter="false"
 
OnCancelCommand="MyDataGrid_Cancel"
OnUpdateCommand="MyDataGrid_Update"
OnDeleteCommand="MyDataGrid_Delete"
OnEditCommand="MyDataGrid_Edit"
 
AutoGenerateColumns="false">
 
<Columns>
<asp:editcommandcolumn edittext="Edit" canceltext="Cancel" updatetext="Update" />
<asp:buttoncolumn text="Delete" commandname="Delete" />
 
<asp:TemplateColumn HeaderText="FieldName1">
 
<ItemTemplate>
<asp:Label ID="lblField1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "FieldName1") %>' />
</ItemTemplate>
 
<EditItemTemplate>
<asp:TextBox runat="server" id="txtField1" Text='<%# DataBinder.Eval(Container.DataItem, "FieldName1") %>'/>
</EditItemTemplate>
 
</asp:TemplateColumn>
</Columns>
 
</ASP:DataGrid>
What are OnCancelCommand, OnUpdateCommand, OnDeleteCommand and OnEditCommand?

Well, we have a DataGrid control and we will go through the above declaration carefully. We have declared four events in the above DataGrid control such as OnCancelCommand, OnUpdateCommand, OnDeleteCommand and OnEditCommand. You can also see that we invoke a method for each event. For example, for the "OnCancel" event we are invoking a server side method called "MyDataGrid_Cancel." We will look into these methods later.

Creating the Cancel, Edit Update and Delete buttons

Just after the <Column> tag, we need to first create the buttons, such as Edit, Cancel, Update, and Delete. These buttons are very common for any database operation. To declare the Edit, Cancel, and Update button you need to have a EditCommandColumn tag, such as

<asp:editcommandcolumn edittext="Edit" canceltext="Cancel" updatetext="Update" />

And for the Delete button, we need to declare a button and use the property commandname to specify the Delete command.

<asp:buttoncolumn text="Delete" commandname="Delete" />

What should be done when a user clicks the Edit button?

When the user clicks the "Edit" button, the corresponding items in the row should show text boxes in order to accept input from user. The tag, EditItemTemplate, should be used to declare the control (typically a TextBox, ListBox, RadioButton, CheckBox, etc). We are going to declare a TextBox that will be showed when the user clicks the Edit button.

<EditItemTemplate>
    <asp:TextBox runat="server" id="txtField1" Text='<%# DataBinder.Eval(Container.DataItem, "FieldName1") %>'/>
</EditItemTemplate>


So we have a EditItemTemplate tag that will be showed only if the user clicks the Edit button/link. It is to be noted that we have a DataBinder for this textbox that will be filled with the value for the corresponding row that was selected by the user. It is this EditItemTemplate which is vital for an Editable DataGrid.

The Edit Event

Sub MyDataGrid_Edit(Sender As Object, E As DataGridCommandEventArgs)
    MyDataGrid.EditItemIndex = CInt(E.Item.ItemIndex)
End Sub

This event will be invoked when user clicks the Edit button/link. We have only one statement in this event. The primary goal of this event is to change the selected row to an editable row, which is done by setting the EditItemIndex property.

The Cancel Event

Public Sub MyDataGrid_Cancel(sender As Object, e As DataGridCommandEventArgs)
    MyDataGrid.EditItemIndex = -1
End Sub

When we click the Edit button, all items in the corresponding row will be changed to be editable. At this time, the Edit button will be replaced with the Cancel and Update buttons. These are two new buttons that will be shown when the user clicks the Edit button. When the user clicks the Cancel button, we want to remove the editable columns. This is achieved by setting the EditItemIndex to -1.

The Update Event

Public Sub MyDataGrid_Update(sender As Object, e As DataGridCommandEventArgs)
    Dim strDestination As String = CType(e.Item.FindControl("txtField1"), TextBox).Text
...................
.........
...
End Sub

When the user clicks the Edit button, the selected row will be changed to an editable item. Then we can enter the new values for the editable columns. The values entered are retrieved using the statement
CType(e.Item.FindControl("txtField1"), TextBox).Text.

Here we use the FindControl method which retrieves the value for the control name passed. Then we can have any statement inside this update event. We can invoke a stored procedure or invoke an inline query. It is all up to us.

Sample Code

Finally, here is a sample aspx page which talks about the editable DataGrid. Click here to download the sample code In this example I have a DataGrid with two columns. Both columns are editable. You can also see that I have used a hidden field to store the original values for the column. If you have any questions about this, please let me know.

Links

DataGrid and Checkboxes
How to capture a Double Click event in DataGrid?
Checkbox Web Server Control
Retrieving Images from SqlServer in ASP .NET
Retrieving Images from SqlServer and displaying it in DataGrid

Send your comments to das@aspalliance.com        



User Comments

Title: d   
Name: dsfds
Date: 4/28/2012 3:11:19 AM
Comment:
f@
Title: Add data to datagrid in Vb6   
Name: jhane
Date: 12/14/2011 10:51:15 PM
Comment:
how to add data to data grid from access
Title: mahboob   
Name: md mahboob alam
Date: 11/4/2010 3:35:16 AM
Comment:
how to edit record using datagrid
Title: data grid view in asp dot net   
Name: amit
Date: 12/17/2009 5:30:39 AM
Comment:
how to assign all inforamtion only in one column of data grid view plz
thanks in advance
Title: Editing a DataGrid Control   
Name: swathi
Date: 2/28/2009 8:28:19 PM
Comment:
hi guys this is very informative
Title: Storing Textbox Value in DataGrid without DataBase   
Name: Avinash
Date: 5/16/2008 8:49:47 AM
Comment:
Hello to Everyone,

I have to know that storing of textbox value into Datagrid using ASP.Net with VB Code. Thanks in Advance..
Title: I want to Grid view edit,delete code in vb.net   
Name: Ram
Date: 5/8/2008 4:14:03 AM
Comment:
how to edit,delete a record in vb.net
Title: update problem   
Name: deep
Date: 4/22/2008 9:13:51 AM
Comment:
how to delete and edit a recode in vb.net
Title: data grid problem   
Name: Manish Sharma
Date: 2/6/2008 4:58:31 AM
Comment:
how to i edit and delete a record in dadagrid in c#
Title: Hi   
Name: Sara
Date: 1/22/2008 2:08:44 AM
Comment:
Plz tell me the c# code for edit and update command for datagrid
Title: how to delete and edit data from datagrid without datagrid view using windows application side   
Name: srinivasan
Date: 1/4/2008 8:59:08 AM
Comment:
thanks
Title: hi   
Name: kumar
Date: 12/6/2007 1:19:34 AM
Comment:
i want code for edit,update in c# code..plz send 2 my mail yathendrakumar_ar@yahoo.co.in
than u
Title: datagrid control   
Name: chand
Date: 11/16/2007 1:18:49 AM
Comment:
i want codings for editing a datagrid in only asp.net with c# codings
Title: i want codings for editing a datagrid in only asp.net with c# codings   
Name: ARUN
Date: 11/14/2007 2:27:21 AM
Comment:
respected sir
i want codings for editing a datagrid in only asp.net with c# codings
Title: i want more   
Name: ganesh
Date: 7/24/2007 4:49:45 AM
Comment:
if iclick the edit button it will go to show page having the save and save&close button.both pages having only list Boxes.
Title: Add a control to datagrid   
Name: kishore
Date: 6/28/2007 6:04:06 AM
Comment:
i want how to add a control(like combobox,listbox) in datagrid,and how to retrive the records to that controls from databse.
Title: It is very nice!!!   
Name: Braja
Date: 2/18/2007 10:25:41 PM
Comment:
Hi, I want more C# code about ASP.

1.How can we edit an textbox value in a button click.
2.How can we bind textbox by selecting data from listbox.

please send me this code very soon.I am waiting for you
through this mail id: brajaketu@gmail.com
Title: Datagrid edit   
Name: ponkumar
Date: 1/31/2007 12:53:36 PM
Comment:
Plz tell me the c# code for edit and update command for datagrid
Title: My e-mail   
Name: Ndayahundwa claude
Date: 12/11/2006 7:53:07 AM
Comment:
nclauder@yahoo.ca
Title: Editing only oneclumn   
Name: Ndayahundwa claude
Date: 12/11/2006 7:47:24 AM
Comment:
Very nice work! I have a small problem I want to edit one column only but when I try to edit the selected column I find that the whole column is edited along. would you tell me What I should do so that I mayed be able to edit a cell one by one using c#.
Title: Problem   
Name: Nisha
Date: 11/15/2006 12:25:43 AM
Comment:
u have used store procedure . i want the coding of this store procedure s_update_forward
Title: datagrid to export pdf   
Name: suresh
Date: 10/16/2006 6:58:38 AM
Comment:
Hi i am sruesh.
i have problem. how to export datagrid to pdf.
Is there any controls for exporting. pls help me.
if u know any url pls send it to me i will see the code and
data
Title: code to Adding only one column in datagrid in asp.net page using vb.net   
Name: Md. Saleem
Date: 6/26/2006 2:27:46 PM
Comment:
Dear Sir,

Pls send me code to Adding only one column in datagrid in asp.net page using vb.net.thanks and regaurds.

My mail id: saleem.mas@gmail.com
Title: Adding data using gird   
Name: saleem
Date: 6/26/2006 2:21:48 PM
Comment:
pls send me any example using VB.net & ASP.net, where Adding data into grid.
Title: code to edit only one column in datagrid in asp.net page using asp.net   
Name: siva
Date: 6/19/2006 6:39:43 AM
Comment:
i want the code to edit and update only one column in data grid can u just mail me the code using sql data adapter to edit only one column thanks and regaurds
Title: PDF   
Name: jayanth.k
Date: 4/28/2006 1:50:50 AM
Comment:
Sir i found all your articles interesting and amazing.That should me appretiated do keep your work going on.
As of know i need your help very badly please send me the reply as soon as possible .
How export the data from asp.net datagrid to a PDF file without using any thirdy party controls or Crystal reports.
Please send me the reply as soon as possible.
kevinster.jayanth@gmail.com voice 9845872441 India B'lore
Title: Great!   
Name: Ray
Date: 4/13/2006 8:30:54 AM
Comment:
Great Mr Jesudas!

Appreciate your efforts. Keep it up. Good Materials

Ray.
Title: error   
Name: huang
Date: 12/14/2005 9:09:12 PM
Comment:
sir, i had read ur article but i got error when try it.
i got error on ur line :
Dim strDestination As String = CType(e.Item.FindControl("txtField1"), TextBox).Text

when i use update command.it said : Object reference not set to an instance of an object. can u help me??
Title: code to edit only one column in datagrid in asp.net page using vb.net   
Name: ganesh
Date: 11/5/2005 2:41:25 AM
Comment:
sir
i want the code to edit and update only one column in data grid can u just mail me the code using sql data adapter to edit only one column thanks and regaurds

ganesh
Title: amazing!   
Name: abhi
Date: 10/20/2005 5:19:37 AM
Comment:
Sir u r amazing! I have read all ur articles & they r fantastic! Keep up d good work! Make india proud!

Product Spotlight
Product Spotlight 



Latest Resources
» 1 Cent Hosting
» 1 Cent Hosting
» TeeChart for .NET
» Outsourced Product Development
» To export Gridview to ExcelSheet


Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2014 ASPAlliance.com  |  Page Processed at 10/25/2014 2:14:39 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search