Return of the DataGrid: Paging and Editing Explained - Editing
(Page 3 of 4 )
I honestly can't tell you the number of times I've had to do supply editing capabilities within a table of data. This involves having hidden fields to track the row (item) you wish to edit, the actual text fields to hold the values, and the server-side intelligence to pick up the modification and commit it to the database. Not the most difficult thing in the world to do, but tedious nonetheless.
Well, wouldn't you know it, Microsoft has been so gracious as to make our lives easier in this arena as well! Unfortunately it's not as simple as typing AllowEdit=”true”. There is slightly more required than just one or two lines, but it's still pretty sweet. Basically all we need to work with is three properties: OnEditCommand, OnCancelCommand, and OnUpdateCommand. There is also an OnDeleteCommand if you need it. And to make it all work, we just need to tell the DataGrid which field is the key for each row, which we do by use of the DataKeyField property.
So, as we add these to our DataGrid, we see it look something like this:
<asp:DataGrid id="dgSocks" runat="server" AutoGenerateColumns="true"
DataKeyField="id" onEditCommand="editMode" onUpdateCommand="doUpdate"
OnCancelCommand="cancelEdit">
Now, we see a bunch of subroutines being referenced here: editMode(), doUpdate(), and cancelEdit(). Let's first worry about editMode() and cancelEdit().
sub editMode
( s as Object, e As DataGridCommandEventArgs )
dgSocks.EditItemIndex = e.Item.ItemIndex
doBinding
End sub</p>
<p> </p>
<p>sub cancelEdit( s as Object, e As DataGridCommandEventArgs )
dgSocks.EditItemIndex = -1
doBinding
End sub
Let me explain what's going on here. As soon as you turn on editing as we have, you get an extra column in your table. In each row is an edit 'button'. When we click edit for a given row, the 'item index' is passed to the editMode() subroutine, which in turn understands and signals that you want to edit that specific row, so put it in edit mode! What this means is that all modifiable fields are replaced by text boxes containing the modifiable values. And the edit 'button' is replaced by Cancel and Update.
So go ahead and try this. Make sure you have created an empty doUpdate() subroutine to circumvent any compile-time errors.
What happens? Well, hopefully exactly what I described! Now if you have paging still turned on, try paging while in edit mode. You'll see that the edit mode stays on, and now the same row on the next page is being edited. This is because it's the same index, make sense?
So how do we get out of edit mode? Try clicking update. Does that do it? It shouldn't, because you've got nothing within the doUpdate() subroutine to tell it to. But if you click cancel, we can see the Edit Item Index is changed to -1, thus exiting edit mode.
Alright, now that we have that under our belt, we just need to create the logic behind the actual updating of the item. Here's what doUpdate should look like:
sub doUpdate
( s as Object, e As DataGridCommandEventArgs )
Dim strConn, strSQL as String
dim updCMD as OleDbCommand
Dim intID, intQuantity as Integer
Dim dblPrice as Double</p>
<p> </p>
<p>intID = dgSocks.DataKeys.Item(e.Item.ItemIndex)
dblPrice = cDbl((CType( e.Item.Cells(2).Controls(0), Textbox)).Text)
intQuantity = cInt((CType( e.Item.Cells(3).Controls(0), Textbox)).Text)</p>
<p> </p>
<p>strSQL = "UPDATE socks SET price = " & dblPrice.ToString & _
", quantity = " & intQuantity.ToString & _
" WHERE id = " & intID.ToString
strConn = "Provider=Microsoft.Jet.OLEDB.4.0; Ole DB Services=-4; Data" &
_ "Source=C:Inetpubdbinventory.mdb"
Dim dbConnection As OleDbConnection = New OleDbConnection(strConn)
dbConnection.Open()
'dbConnection.Execute( strSQL )
updCMD = new OleDbCommand( strSQL, dbConnection )
updCMD.ExecuteNonQuery
dbConnection.Close()</p>
<p> </p>
<p>dgSocks.EditItemIndex = -1
doBinding
end sub
So by now, you should be able to read through that like the morning paper. Essentially we're just picking up the modified values, throwing them into a SQL UPDATE statement, and executing it. Then we set the edit item index back to -1 (exit edit mode), and re-bind the data to pick up all the fresh values.
What may have stumped you (though it may not have) is the part where we get the textbox values. Really, all I did there was cast the Control(0) of the cell to a textbox. This is just a quick way of obtaining the text value, which could then be cast to whatever data type necessary.
And that's all it takes! Are you sold yet?
Next: Conclusion >>
More .NET Articles
More By Justin Cook
