Why is there no __doPostBack() JavaScript added to a CommandField's Update button in GridView when rendered to HTML

Question

I have a basic GridView with a CommandField which uses the CommandField's in-built Edit, Cancel, Update and Delete buttons, with the ButtonType property set to "Image" (ImageButtons), defined as:

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="false"
OnRowEditing="gv_RowEditing" OnRowCancelingEdit="gv_RowCancelingEdit" OnRowUpdating="gv_RowUpdating" OnRowDeleting="gv_RowDeleting">
<Columns>
    <asp:CommandField 
        ShowEditButton="true" ShowDeleteButton="true" ButtonType="Image"
        EditImageUrl="~\Images\Icons\gridView_Edit.png"
        CancelImageUrl="~\Images\Icons\gridView_CancelEdit.png"
        UpdateImageUrl="~\Images\Icons\gridView_Update.png"/>
</Columns>

The server-side C# event handlers for the OnRowEditing, OnRowCancelingEdit, OnRowUpdating and OnRowDeleting events are working fine and are defined as:

protected void gv_RowUpdating(object sender, GridViewUpdateEventArgs e) { }
protected void gv_RowEditing(object sender, GridViewEditEventArgs e) { }
protected void gv_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e) { }
protected void gv_RowDeleting(object sender, GridViewDeleteEventArgs e) { }

When the page is rendered to HTML, the ImageButtons in the CommandField are rendered to the following (simplified) <input> tags:

<input type="image" name="ctl00$Body$gv$ctl02$ctl00" src="Images/update.png" alt="Update" style="border-width:0px;">
<input type="image" src="Images/delete.png" alt="Delete" onclick="javascript:__doPostBack('ctl00$Body$gv','Delete$0')" style="border-width:0px;">
<input type="image" src="Images/edit.png" alt="Edit" onclick="javascript:__doPostBack('ctl00$Body$gv','Edit$0')" style="border-width:0px;">
<input type="image" src="Images/cancel.png" alt="Cancel" onclick="javascript:__doPostBack('ctl00$Body$gv','Cancel$0')" style="border-width:0px;">

NOTE: In reality, only either Edit/Delete or Update/Cancel are rendered at any one time, depending on whether the GridView is in edit mode or not.

So, why does the rendered Update button not use ASP.NET's __doPostBack JavaScript function, when the Delete, Edit and Cancel buttons do?

How is it that the OnRowUpdating event is handled?

NOTE: When using the default ButtonType for the CommandField it does render __doPostBack, but when using ButtonType="Image" __doPostBack is not included.

Answer 1

Note that these 4 buttons are never displayed together, you have either "Edit" "Delete" or, after you click "Edit", you get "Update" "Cancel".

So just as you click your "Edit" button and the set of buttons changes from "Edit" "Delete" to "Update" "Cancel", your "Update" button WILL have the __doPostback attached to it.

The OnRowUpdating is then handled normally, by the doPostback just after you click the "Edit" button.

You can download one of my examples

http://www.ii.uni.wroc.pl/~wzychla/ra2829/example3a.zip

to see that. Just change the button type to Image in Default.aspx and attach your handlers to the grid.