Try using the ItemStyle-CssClass property of your CommandField. Also since you are using a link button type the color may not show up unless you use a style of ".UsersGridViewButton a"
CommandField is for ease of use. It's capabilities are limited, but it's less markup than a TemplateField.
Use TemplateField to do things CommandField can't.
Superguppie.
Please remember to click “Mark as Answer” on the post that helps you. This can be beneficial to other community members reading the thread.
When all you've got is a Hammer, Every Problem looks like a Nail. Michael Swain.
moshik.salem
Member
34 Points
124 Posts
how to apply css style on gridView edit Button command?
May 22, 2012 12:17 PM|LINK
hi,
can anyone tell me how to apply css style on gridView edit Button command?
i wrote some css styling on external file, and with theme at the config file i apply the all css file on my web app, here is my code:
<asp:GridView ID="UsersGridView" runat="server" AutoGenerateEditButton="False" AutoGenerateColumns="false"> <Columns> <asp:CommandField ButtonType="Link" ShowEditButton="true" HeaderText="Edit User" > <ControlStyle CssClass="UsersGridViewButton" /> </asp:CommandField> <asp:BoundField DataField="UserName" HeaderText="User Name" /> </Columns> </asp:GridView>and the css styling:
.UsersGridViewButton { border: thin solid #B6E427; font-family: 'Arial Unicode MS'; background-color: #C1F984; color: #FFFFFF; font-style: normal; text-align: center; padding-right: 10px; padding-left: 10px; }Usman Amir
Participant
790 Points
138 Posts
Re: how to apply css style on gridView edit Button command?
May 22, 2012 12:34 PM|LINK
You could use TemplateFields instead of CommandFields,
use this
<asp:TemplateField HeaderText="Edit User"> <ItemTemplate> <asp:LinkButton ID="EditButton" runat="server" CssClass="UsersGridViewButton" CommandName="Edit" Text="Edit" /> </ItemTemplate> </asp:TemplateField>instead of this
<asp:CommandField ButtonType="Link" ShowEditButton="true" HeaderText="Edit User" > <ControlStyle CssClass="UsersGridViewButton" /> </asp:CommandField>moshik.salem
Member
34 Points
124 Posts
Re: how to apply css style on gridView edit Button command?
May 22, 2012 12:47 PM|LINK
Thank you for mentioning taht option, but i want to make it right with the CommandFields.
anyone knows how to solve my problem?
Nasser Malik
Star
11584 Points
1778 Posts
Re: how to apply css style on gridView edit Button command?
May 22, 2012 12:57 PM|LINK
see
http://forums.asp.net/t/1368247.aspx
Skype: maleknasser1
moshik.salem
Member
34 Points
124 Posts
Re: how to apply css style on gridView edit Button command?
May 22, 2012 01:06 PM|LINK
Thank you. another question, should i use <asp:templatefield> instead of the CommandFields tags?
or there is a way for apllying css from external file on CommandFields tags?
ksqcoder
Participant
1292 Points
207 Posts
Re: how to apply css style on gridView edit Button command?
May 22, 2012 01:42 PM|LINK
Try using the ItemStyle-CssClass property of your CommandField. Also since you are using a link button type the color may not show up unless you use a style of ".UsersGridViewButton a"
moshik.salem
Member
34 Points
124 Posts
Re: how to apply css style on gridView edit Button command?
May 22, 2012 02:22 PM|LINK
Thank you but it's not working.
can anyone tell me if it's better to use the templateField instead of the commandField?
superguppie
All-Star
48225 Points
8679 Posts
Re: how to apply css style on gridView edit Button command?
May 24, 2012 08:54 AM|LINK
CommandField is for ease of use. It's capabilities are limited, but it's less markup than a TemplateField.
Use TemplateField to do things CommandField can't.
Please remember to click “Mark as Answer” on the post that helps you. This can be beneficial to other community members reading the thread.
When all you've got is a Hammer, Every Problem looks like a Nail. Michael Swain.
JoseyW
Member
2 Points
1 Post
Re: how to apply css style on gridView edit Button command?
Jan 21, 2013 03:14 PM|LINK
All you need to do is add the ItemStyle-Css to your commandfield:
<asp:CommandField ShowEditButton="true" ShowDeleteButton="true" ItemStyle-CssClass="trCBPad" />
the the css wherever you are keeping it:
.trCBPad { padding-left: 5px; padding-right: 5px; }