Tips for using an Editable DataGrid in ASP.NET
Tips for using an Editable DataGrid in ASP.NET
A reader mentioned having trouble finding details about editable datagrids (I’m assuming in ASP.NET). I, likewise, fought with the same thing. Here are some tips to help out with that.
For the purposes of this lightweight instruction, I'll defer to other texts for creating a data connection, data adapater, and data sets with which to bind your datagrid.
Assumptions (a few!):
Lets assume that your grid starts off with 3 columns of data; one each for firstname, lastname and id. The datagrid is named "dg1". I’ll also assume that when you run this project, the datagrid appears and has data listed in it. For reference, the dataadapter in use is named "da1" and the dataset is named "ds1".
To get an "Edit" linkbutton on your grid, open the property builder and look for the "Edit, Update, Cancel" option under the Available columns. This item is a node of a treeview control on the Columns page of the Property Builder. Double-click the "Edit, Update, Cancel" item to get it in your selected columns.
When you run your project and the datagrid appears, clicking on the "Edit" linkbutton for a row fires the EditCommand event. In order to render the textboxes (within the row) for editing the row you’ve selected, you must set the EditItemIndex property of the datagrid to be equal to the index of the row you clicked on. Check this out:
Private Sub dg1_EditCommand(ByVal source As Object, _
ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
Handles dg1.EditCommand
dg1.EditItemIndex = e.Item.ItemIndex
Rebind() ‘see next sub for this one
End Sub
Private Sub Rebind()
da1.Fill(ds1)
dg1.DataSource = ds1
dg1.DataMember = "tblTransactions"
‘the datamember is the table (think of ‘recordsets’) in the data set
‘you can have multiple tables in your datasets!
dg1.DataBind()
End Sub
Be sure that in your Page_Load sub, that you’ve got something to recognize whether the page is being posted back or not (i.e., “If not Page.IsPostBack then…”). Always remember that this event fires on every roundtrip back from the server!
Of course, you’ll want to update your data source after editing your data! When in edit mode, you’ll see that your “Edit” linkbutton has been transformed into both “Update” and “Cancel” linkbuttons. To have either of these linkbuttons actually do anything, you’ll need to execute code in the UpdateCommand and CancelCommand events respectively.
To “unselect” the row on the datagrid, set the EditItemIndex = -1. You’ll need to do this on either “Update” or “Cancel” to get the grid out of edit mode.
There are several ways to update your underlying data with the changes you made in edit mode. One way is to build a update query with the values of the textboxes from edit mode and do an “ExecuteNonQuery” on your data connection.
To get the values of the edit mode textboxes may not be obvious (I found it on the web somewhere).
Here's the trick, by way of an example. Say the third column of my datagrid (and thus, my edited row) contains “lastname”. To assign the value of that textbox to the variable “strLastName”, do this within the UpdateCommand function:
strLastName = CType(e.Item.Cells(2).Controls(0), TextBox).Text
If strFirstName needs the value of the 4th column’s cell, so:
strFirstName = CType(e.Item.Cells(3).Controls(0), TextBox).Text
The text box is always the 0th control in the cell you reference. You might need to convert the datatype from text to integer or date depending on your data’s circumstances.
Hope this helps someone!