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