"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.

Highborn

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.]

Dutra

Great, It worked. An additional question: If I use a default implementation(no Btn_Click events), is it vulnerable to SQL injection? – Highborn

It depends a lot on the way you are using your SQL Statements. You are using SqlDataSource for your Gridview, So Usually it provides a fair level of security if you are not concatenating your query with UserInput Or not using any dynamic sql. This really DOESN'T MEANS that you shouldn't use Dynamic sql or Concatenate your query, But this means that you have to take special care to prevent SQL Injection. Check these Links: devproconnections.com/aspnet/sqldatasource-safe , SO Question: #5145066, – Dutra

Also the MSDN link will help you get started: msdn.microsoft.com/en-us/library/ff648339.aspx. – Dutra

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.

Jere

It doesn't work, whta should I put in the CommandName? Either I put "edit" or "submit" it does nothing when clicking. Cancel button does work.<asp:Button ID="UpdateBtn" runat="server" Text="Edit" CommandName="Edit"/> – Highborn

I think you put "Update" and "Cancel" in their CommandName fields. – Jere