Refresh / Cancel Buttons Not Displayed in Template Editing Template

Question

When you create an edit button in each row of the Gridview using CommandField , after clicking the button, the update / cancel buttons are displayed, so you can accept / cancel the changes. However, I want an edit button that has a tooltip text, and since the CommandField does not have a tooltip property, I used a TemplateField . It worked with the delete button, but I have 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, 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 the Update / Cancel buttons are not displayed, so I can’t update / edit anything. Why is this happening?

Any ideas for implementing a successful edit button?

NOTES:

• Both buttons do not have vb code behind, for some reason the delete button only works with DeleteCommand in SqlDataSource , and if I try to delete this command, it gives an error message because DeleteCommand is not specified.

• UpdateCommand has no purpose, it can be deleted. I could use it for the refresh button instead of the edit button, but when I tried, it says @params unknown, so I decided to use the edit button instead.

Answer 1

<asp:TemplateField> used when you want to customize your own user-defined content, user-defined for each element in a GridView control.

<asp:CommandField> used when you want to use predefined command buttons to select, edit, or delete. Check out MSDN here .

So, when you use your own custom method for the Edit button, you also need to specify your own path for the Update and 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 that Only if you again provide custom implementation logic for updating and canceling , do you also define onclick events for the two Refresh and Cancel buttons. Else remove OnClick from the layout of these buttons. [ BtnUpdate_Click and BtnCancel_Click here.]

Answer 2

I think that since you converted it to TemplateField, all automatically functioning things (such as the Update / Cancel buttons) have been disabled. I'm sure you need to add <EditItemTemplate> using the Update and Cancel buttons and bind them to the corresponding commands using CommandName .