To read the article online, visit http://www.4GuysFromRolla.com/articles/071002-1.2.aspx

An Extensive Examination of the DataGrid Web Control: Part 6

By Scott Mitchell


  • Read Part 1


  • In Part 1 of this article we examined how to display the data from the Products database table into a DataGrid. In this part we'll look at how to add the functionality to allow the user to edit a particular row in the DataGrid.

    Allowing the End User to Edit a Row in the DataGrid


    To allow the user to edit a row in the DataGrid, we need to provide some means for the user to specify what row they wish to edit. As we saw in Part 3 of this article series, one can use ButtonColumn controls to tie a clickable button to each row of a DataGrid. While we could use this approach to enable editing, it would likely be messy, at best. Fortunately the DataGrid provides a specific control for this functionality, the EditCommandColumn control.

    The EditCommandColumn control adds a new column to the DataGrid, placing an Edit button next to each row. The button, when clicked, causes a postback and the EditCommand event to be fired. As we will shortly see, we'll need to write some code for this event handler. For now, though, let's just examine how to add an Edit button to the DataGrid using the EditCommandColumn control. As you can see in the code below, you simply add the EditCommandColumn control like you would a BoundColumn or ButtonColumn control:

    <asp:DataGrid id="dgProducts" runat="server"
       AutoGenerateColumns="False" CellPadding="4"
       HeaderStyle-BackColor="Black"
       HeaderStyle-ForeColor="White"
       HeaderStyle-HorizontalAlign="Center"
       HeaderStyle-Font-Bold="True">
            
       <Columns>
        <asp:EditCommandColumn EditText="Edit Info" 
              ButtonType="PushButton"
              UpdateText="Update" CancelText="Cancel" />
    
           <asp:BoundColumn HeaderText="Product ID" DataField="ProductID"
                   ReadOnly="True" />                
           <asp:BoundColumn HeaderText="Price" DataField="UnitPrice"
                   ItemStyle-HorizontalAlign="Right"
                   DataFormatString="{0:$#,###.##}" />
           <asp:BoundColumn HeaderText="Name" DataField="ProductName" />
           <asp:BoundColumn HeaderText="Description" 
                   DataField="ProductDescription" />                        
       </Columns>        
    </asp:DataGrid>
    

    A screenshot of the DataGrid with the EditCommandColumn control in place. The EditCommandColumn control has a number of optional properties, such as: ButtonType, which specifies if a hyperlink (LinkButton, the default) or push button (PushButton) should be used; the text for the Edit, Update, and Cancel buttons, EditText, UpdateText, and CancelText; and other miscellaneous display properties, like HeaderText, ItemStyle, etc.

    If you read the last paragraph closely you may be a bit surprised that the EditCommandColumn control has UpdateText and CancelText properties - after all, I had only mentioned that the EditCommandColumn control provides an Edit button. More accurately, the EditCommandColumn control provides an Edit button for each row except for the row that is being currently edited. For that row, the EditCommandColumn control shows two buttons, an "Update" and "Cancel" button.

    Selecting a Row to be Edited


    The DataGrid contains a property called EditItemIndex, which specifies what row of the DataGrid is the row being edited. The DataGrid numbers its rows starting at 0. By default, the DataGrid is not editing any row, so the EditItemIndex, by default, has a value of -1. Since we want to mark a row for editing when its "Edit" button is clicked, we simply need to write some code in the EditCommand event handler, which is the DataGrid event handler that is fired when the EditCommandColumn control's "Edit" button is clicked. This event handler simply needs to set the EditItemIndex property to the row whose "Edit" button was clicked and then rebind the DataGrid data (by calling BindData()). The code for this event handler can be seen below:

    Sub dgProducts_Edit(sender As Object, e As DataGridCommandEventArgs)
        dgProducts.EditItemIndex = e.Item.ItemIndex
        BindData()
    End Sub
    

    To wire this event handler up to the EditCommand event, simply specify this in your DataGrid control, like so:

    <asp:DataGrid id="dgProducts" runat="server"
       ...   
       OnEditCommand="dgProducts_Edit"
       ... >
            
       <Columns>
           ...
       </Columns>        
    </asp:DataGrid>
    

    A screenshot of the DataGrid when a particular row is being edited. Note that with this code when the user clicks the "Edit" button the Web page will be posted back and the DataGrid row whose "Edit" button was clicked will have, in place of the "Edit" button, an "Update" and "Cancel" button. Furthermore, the data values in the cells in the DataGrid for the edited row have automatically changed from a textual value to a value in an editable textbox, as can be seen in the screenshot to the left.

    If you are trying this example on your own you may see two discrepancies between the screenshot and what you are seeing on your computer. The first difference you may have noted was that in your example, all of the columns in the row being edited were turned into a textbox, while in the screenshot the ProductID column is not a textbox, thereby making it un-editable. Clearly there are situations where you want to make certain parts of the data un-editable, as with the ProductID, which is a primary key in the Products database table. To make a particular column in your DataGrid un-editable, simply set the ReadOnly property to True for the particular BoundColumn control. That is, the code for the DataGrid in the screenshot contains the following DataGrid definition:

    <asp:DataGrid id="dgProducts" runat="server"
       ... >
            
       <Columns>
          <asp:BoundColumn HeaderText="Product ID" DataField="ProductID" 
                ReadOnly="True" />
          ...
       </Columns>        
    </asp:DataGrid>
    

    You may have also noticed in the screenshot that the row being edited is shaded a different color than the rest. You can specify all sorts of different stylistic features for the row being edited by using the EditItemStyle property of the DataGrid. Simply set this property in the DataGrid control like you would for the HeaderStyle or ItemStyle, that is:

    <asp:DataGrid id="dgProducts" runat="server"
       ...   
       EditItemStyle-BackColor="#eeeeee"
       ... >
            
       <Columns>
           ...
       </Columns>        
    </asp:DataGrid>
    

    Now that we've examined how to select a particular row for editing, all that remains is to specify the code that should execute when the user opts to update the edited row or to cancel. We'll examine how to accomplish these two tasks in Part 3 of this article.

  • Read Part 3!

  • Article Information
    Article Title: ASP.NET.An Extensive Examination of the DataGrid Web Control: Part 6
    Article Author: Scott Mitchell
    Published Date: July 10, 2002
    Article URL: http://www.4GuysFromRolla.com/articles/071002-1.2.aspx


    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers