Set image and hover image to <asp:CommandField ButtonType="Button" .../asp>

Question

i have this

  <asp:CommandField ButtonType="Button" CancelImageUrl="~/img/annulla_grigio.png" EditImageUrl="~/img/modifica_grigio.png"
                                        ShowEditButton="True" UpdateText="" UpdateImageUrl="~/img/salva_grigio.png" ItemStyle-HorizontalAlign="center"
                                        ItemStyle-CssClass="tabella_p_modifica" ControlStyle-CssClass="modifica_hover" EditText=""/>

And it works when i hover on it change with other image, for example change gray pencil into red pencil. But when i click on Edit button it's show two buttons as Update and Cancel. But with same image of edit.

Answer 1

The first thing to try is to switch ButtonType="Button" to ButtonType="Image". The reason is that your ImageUrl properties won't appear unless you set that to Image

I suspect you are setting the pencil image inside of your CSS class modifica_hover. This class will apply to both the Edit and Cancel buttons. That's probably why you see the pencil for both of them.

An alternative that you may want to try is to create this field as a TemplateField which gives you more control. Just make sure to pass the correct CommandName for the event to trigger the GridView event.

<asp:TemplateField>
    <ItemTemplate>
        <asp:ImageButton ID="ibEdit" runat="server" CommandName="Edit" ImageUrl="~/img/modifica_grigio.png" />
    </ItemTemplate>
    <EditItemTemplate>
        <asp:ImageButton ID="ibUpdate" runat="server" CommandName="Update" ImageUrl="~/img/salva_grigio.png" />
        <asp:ImageButton ID="ibCancel" runat="server" CommandName="Cancel" ImageUrl="~/img/annulla_grigio.png" />
    </EditItemTemplate>
</asp:TemplateField>