“Update/Cancel” buttons don't appear in TemplateField Edit button

Question

When you create an edit button in every row of a Gridview using CommandField it displays update/cancel buttons after clicking, so you can accept/cancel changes. However, I want an edit button that has tooltip text, and since CommandField doesn't have tooltip property, i used TemplateField. It worked with the delete button, but I'm having problems with the edit button:

<asp:GridView ID="GridView1" runat="server" 
                    AllowPaging="True" AllowSorting="True"
                    DataMember="DefaultView" 
                    DataSourceID="SqlDataSource1" AutoGenerateColumns="False" 
                    DataKeyNames=FIELD,FIELD,FIELD" CellPadding="4" ForeColor="#333333" Width="90%"
                    Height="90%" Font-Size="Small">
                    <RowStyle BackColor="#EFF3FB" />
                    <Columns>
                        <asp:BoundField DataField="FIELD" HeaderText="FIELD" ReadOnly="True" 
                            SortExpression="FIELD" />
                        <asp:BoundField DataField="FIELD" HeaderText="FIELD" 
                            SortExpression="FIELD" />
                        <asp:BoundField DataField="FIELD" HeaderText="FIELD" 
                            SortExpression="FIELD" />
                        <asp:BoundField DataField="FIELD" HeaderText="FIELD" ReadOnly="True" 
                            SortExpression="FIELD" />
                        <asp:BoundField DataField="FIELD" HeaderText="FIELD" ReadOnly="True" 
                            SortExpression="FIELD" />
                        <asp:BoundField DataField="FIELD" HeaderText="FIELD" 
                            SortExpression="FIELD" />                        
                            <asp:CommandField ButtonType="Image"  Visible="true" EditText="Edit" ShowEditButton="True" EditImageUrl="images/pencil1.png"></asp:CommandField>                            
                            <asp:TemplateField >
                            <ItemTemplate>
                             <asp:ImageButton ID="deleteButton" runat="server" CommandName="Delete" Text="Delete" 
                                        OnClientClick="return confirm('¿Are you sure?');" ToolTip="delete" ImageUrl="images/DeleteRed1.png" />
                            </ItemTemplate>                                     
                            </asp:TemplateField>
                    </Columns>                    
                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <EditRowStyle BackColor="#2461BF" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:DBUserInterfaceConnectionString %>"                     
                    SelectCommand="SELECT ... FROM ...  INNER JOIN ... ON ..."
                    DeleteCommand="DELETE FROM ... WHERE ...=@param;"
                    UpdateCommand="UPDATE ... SET ... = @param, ... = @param2 WHERE ... = @param3 and ... = @param4 and ... = @param5;"
                    >
                    </asp:SqlDataSource>

As I said before, I replaced CommandField with:

<asp:TemplateField >
<ItemTemplate> 
<asp:ImageButton ID="editButton" runat="server" CommandName="Edit" Text="Edit" ToolTip="Edit" ImageUrl="images/pincel1.png" />  
</ItemTemplate>
</asp:TemplateField >

but "Update/Cancel" buttons don't appear, so I can't update/edit anything. Why does it happen?

Any Ideas to implement a succesful edit button?

NOTES:

1. Both buttons don't have vb code behind, for some reason delete button works just with DeleteCommand in the SqlDataSource, and if I try to delete the command, it prompts error because no DeleteCommand is specified.

2. UpdateCommand has no purpose, it can be deleted. I could use it for a update button instead of an edit button, but when i tried, it says @params are not known, that's why I decided to use edit button instead.

Answer 1

The <asp:TemplateField> is used when you want to set your own-defined i.e. User-Defined content for each item in the GridView control.

The <asp:CommandField> is used when you want to use pre-defined command buttons to perform select, edit, or delete operations. Check MSDN here.

So, when your are using your own user-defined way for edit button, you also need to specify your custom content way for Update & Cancel button inside <EditItemTemplate> as :

<asp:TemplateField >            
<ItemTemplate> 
<asp:ImageButton ID="editButton" runat="server" CommandName="Edit" Text="Edit" 
     ToolTip="Edit" ImageUrl="images/pincel1.png" />  
</ItemTemplate>            
<EditItemTemplate>
<asp:ImageButton ID="BtnUpdate" runat="server" CommandName="Update" Text="Update" 
     OnClick="BtnUpdate_Click" ImageUrl="images/Update.png"/>
<asp:ImageButton ID="BtnCancel" runat="server" CommandName="Cancel" Text="Cancel" 
     OnClick="BtnCancel_Click" ImageUrl="images/Cancel.png"/>
</EditItemTemplate>        
</asp:TemplateField >

And just make sure, Only if you are again providing your Custom Implementation for Update & Cancel logic, you also define the onclick events for these two Update and Cancel buttons. Else remove the OnClick from markup of these buttons. [ BtnUpdate_Click & BtnCancel_Click here.]

Answer 2

I think since you've converted it to a TemplateField, all of the automatically-functioning stuff (like Update/Cancel buttons) has been disabled. I'm betting you'll need to add an <EditItemTemplate> with the Update and Cancel buttons, and hook them to the relevant commands using CommandName.