CODEWITHSUNDEEP
asp.net
BillyHoel Joel
BillyHoel Joel

Reputation: 21

How to Change CommandField ButtonType Image Width and Height

Hi I have a commandfield for deleting, and I gave it a DeleteImageURL but i do not know how to change the height and width of it and make it centered.

DeleteImageUrl="~/img/error.png"

Here is my gridview:

<asp:GridView ID="gvOrderDetail" runat="server" AutoGenerateColumns="False" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" CellPadding="4" ForeColor="#333333" GridLines="None" Width="660px">
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <Columns>
            <asp:CommandField HeaderText="Action" ShowDeleteButton="True" ButtonType="Image"   DeleteImageUrl="~/img/error.png" /> 
            <asp:BoundField DataField="PartNumber" HeaderText="Part Number" />
<asp:BoundField DataField="Description" HeaderText="Description"></asp:BoundField>
            <asp:BoundField DataField="Qty" HeaderText="Qty" >
            <ItemStyle HorizontalAlign="Right" />
            </asp:BoundField>
            <asp:BoundField DataField="Price" HeaderText="Price" >
            <ItemStyle HorizontalAlign="Right" />
            </asp:BoundField>
            <asp:BoundField DataField="ExtPrice" HeaderText="Ext Price" >
            <ItemStyle HorizontalAlign="Right" />
            </asp:BoundField>
        </Columns>
            <EditRowStyle BackColor="#999999" />
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#E9E7E2" />
            <SortedAscendingHeaderStyle BackColor="#506C8C" />
            <SortedDescendingCellStyle BackColor="#FFFDF8" />
            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
    </asp:GridView>

Upvotes: 0

Views: 4457

Answers (2)

Leo
Leo

Reputation: 14850

You have a Style property that you can use for this purpose:

  • ControlStyle

ControlStyle

This applies css style through strongly-typed properties to the controls inside the data item. Here's an example of how to use it...

<asp:GridView...>
    <Columns>
        <asp:CommandField ControlStyle-Width="16px" ControlStyle-Height="16px" />
    </Columns>
</asp:GridView>

Of course, this will apply the same style to all the controls inside the CommandField, so if you specify ShowEditButton=true and ShowDeleteButton=true in the CommandField both the delete and the edit button will share the same style. The bottom line is, this might be a bit limited if you need to have "total" control of these controls.

If you need to specify different styles for each control then you should use a TemplateField instead of a CommandField

Upvotes: 4

BillyHoel Joel
BillyHoel Joel

Reputation: 21

I figured it out

ItemStyle-Width="25px"

Final Code:

<asp:GridView ID="gvOrderDetail" runat="server" AutoGenerateColumns="False" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" CellPadding="4" ForeColor="#333333" GridLines="None" Width="660px">
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <Columns>
            <asp:CommandField HeaderText="Action" ShowDeleteButton="True" ButtonType="Image" DeleteImageUrl="~/img/error.png" ItemStyle-Width="25px" /> 
            <asp:BoundField DataField="PartNumber" HeaderText="Part Number" />
<asp:BoundField DataField="Description" HeaderText="Description"></asp:BoundField>
            <asp:BoundField DataField="Qty" HeaderText="Qty" >
            <ItemStyle HorizontalAlign="Right" />
            </asp:BoundField>
            <asp:BoundField DataField="Price" HeaderText="Price" >
            <ItemStyle HorizontalAlign="Right" />
            </asp:BoundField>
            <asp:BoundField DataField="ExtPrice" HeaderText="Ext Price" >
            <ItemStyle HorizontalAlign="Right" />
            </asp:BoundField>
        </Columns>
            <EditRowStyle BackColor="#999999" />
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#E9E7E2" />
            <SortedAscendingHeaderStyle BackColor="#506C8C" />
            <SortedDescendingCellStyle BackColor="#FFFDF8" />
            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
    </asp:GridView>

Upvotes: 0

Related Questions