How can I give style for BoundField?
I'm using BoundField in Gridview. Tt shows an underline and an unwanted color.
How do I remove underline and color?
Depending on what bound field you are trying it might vary a little but here is an example. Each fields has properties for various styles and you can set CssClass as well.
CommandField
.select {
text-decoration: none;
color: Red;
}
<asp:CommandField ShowSelectButton="True">
<ControlStyle CssClass="select" />
</asp:CommandField>
BoundField
.product {
color: Blue;
}
<asp:BoundField DataField="ProductName" HeaderText="Product Name" ItemStyle-CssClass="product">
<ItemStyle CssClass="product" />
</asp:BoundField>
Go to GridView Properties → Columns and you will find all your fields listed there. There you can set the style properties of BoundField.
Another alternative is using a Template Field where you will have more control.
Related
I have a GridView using a few css classes, that is okay.
The problem is that applying individual Css classes to the boundfield of the gridview is not being applied..
Here is My grid view:
<asp:GridView ID="gvwExample" runat="server" CssClass="table table-bordered table-condensed epalist gridtextcenter" EmptyDataText="The search didn't return any records" ShowHeaderWhenEmpty="true" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" OnRowDataBound="gvwExample_RowDataBound" >
<columns>
<asp:BoundField DataField="NB" ItemStyle-CssClass="textleft" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="6%" HeaderText="NB" />
<asp:BoundField DataField="Name" ItemStyle-Width="19%" HeaderText="Name" />
<asp:BoundField DataField="CLevel" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="6%" HeaderText="CLevel" />
<asp:BoundField DataField="CC Host" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="7%" HeaderText="CC Host" />
<asp:BoundField DataField="System" ItemStyle-Width="15%" HeaderText="System" />
<asp:BoundField DataField="Object Type" ItemStyle-Width="12%" HeaderText="Object Type" />
<asp:BoundField DataField="Object ID" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="8%" HeaderText="Object ID" />
<asp:BoundField DataField="Object Description" ItemStyle-Width="17%" HeaderText="Object Description" />
<asp:BoundField DataField="Excl Mngr" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="9%" HeaderText="Excl Mngr" />
</columns>
</asp:GridView>
Here is my CssClass of the first column "NB":
.textleft{
text-align:left;
}
.gridtextcenter td, .gridtextcenter th{
text-align:center;
}
So the main thing is:
the class "gridtextcenter" will center all the text of all my td, but the first column use the css class "textleft" that should place the text not centered, why is not working??
Thanks alot in advance ;)
Because .gridtextcenter td has more specificity than .textleft
write your css in this way
.gridtextcenter .textleft{
text-align:left;
}
.gridtextcenter td, .gridtextcenter th{
text-align:center;
}
How Specificity works :
1 = for all type of tags like <p>, <a>
10 = for class like .className
100 = for id like #idName
This is a simple question. In a GridView control, I assumed that I could set the HeaderStyle-Font-Bold item within the asp:GridView tag and it would automatically apply it to all column header texts but this has no effect and only works if I set it within the asp:BoundField tag of each column.
This doesnt work:
<asp:GridView ... HeaderStyle-Font-Bold="false">
but this does:
<asp:BoundField ... HeaderStyle-Font-Bold="false"/>
Is this how its suppose to work? ie do I have to set the headerstyle at each column?
What effect should it have if I set the HeaderStyle-Font-Bold in the asp:Griview tag?
Thanks
Rob
Edit
I'm not looking for a solution as to how to make the header text bold as I already know how to do this. My question is about using the HeaderStyle-Font-Bold property and why it doesnt work if I set it in the asp:griview tag but works fine in the asp:BoundField tag.
Thanks
Add class to Gridview Control work both for using ItemTemplate,BoundField and set css
HTML MARKUP:
<asp:GridView CssClass="gvstyling">
....
</asp:GridView>
Simple CSS:
// For heading
.gvstyling th {
background-color: Red;
font-size: 12px;
}
// For Cell
.gvstyling td {
background-color: Red;
font-size: 12px;
}
// For Row
.gvstyling tr {
background-color: Red;
font-size: 12px;
}
Answer to yours edited one
If you using TemplateField, then you need to Add HeaderStyle-Font-Bold="false" inside TemplateField instead of Gridview and it will work for you
HTML MARKUP: look like this
<asp:GridView id="myGV1" CssClass="gvstyling">
<asp:TemplateField HeaderText="Id" HeaderStyle-Font-Bold="false" Visible="false">
<ItemTemplate>
<asp:Label ID="lblid" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
......
......
</asp:GridView>
what about
<headerstyle
font-bold="false"/>
I can't get my paging buttons: "<< < > >>" to align right.
Here is my GridView:
<asp:GridView ID="GridView1" ShowHeader="false" AllowPaging="true" PageSize="2"
AutoGenerateColumns="false" Width="100%" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
foo
</ItemTemplate>
<ItemStyle CssClass="blah" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
bar
</ItemTemplate>
<ItemStyle CssClass="pluh" />
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="gridpager" HorizontalAlign="Right" />
<PagerSettings Mode="NextPreviousFirstLast" FirstPageText="<<" PreviousPageText="<"
NextPageText=">" LastPageText=" >>" Position="Bottom" />
</asp:GridView>
And the CSS style:
.gridpager, .gridpager td
{
padding-left: 5px;
text-align: right;
}
If I remove the PageStyle CssClass and use HorizontalAlign="Right" on PagerSettings it works, but then I don't get the padding I need. And specifying both a CssClass and HorizontalAlign like my sample doesn't work.
What do I need to do?
Thank you!
It looks because of the horrible markup Web Forms outputs. The pager is created as a table within a td. I can get it working with this CSS:
.gridpager table {
float: right;
}
Edit: glad you got it figured out. I didn't know if you wanted to do it with pure CSS. I also don't like the float method much.
Edit 2: Looks like the rendered grid uses the align attribute in the td used for the pager when you use <PagerStyle HorizontalAlign="Right" />
Well, I feel kind of silly, but turns out I just needed to remove "text-align: right" from my style. Thanks for reading!
You can do simply a css trick:
.gridpager td table{
margin-right:20px;
}
This should solve the issue.
I have an ASP.NET GridView with paging enabled. The list of page indexes are not listed close to each other. Instead, there's like 80px between each page index. Is there a property which controls this?
You can use PagerStyle, here is a skin I use
<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" CssClass="lightTable">
<HeaderStyle BackColor="#EAEEEF" />
<AlternatingRowStyle BackColor="#F7F9F8" />
<PagerStyle CssClass="tablePagingFooterDirectory" />
</asp:GridView>
Also it renders as a table by default, so this css can be used
.tablePagingFooterDirectory td { padding: 1px; background-color: #EAEEEF; }
tr.tablePagingFooterDirectory table td { color: #434F5E; border:none; }
I found that there was a 'table {width: 100%} css declaration which caused the issue.
I created a GridView in an ASP.NET application and used the Auto Format tool to apply an attractive style. Now I'm moving the style markup to the CSS sheet and I'm having a weird problem where the text in the header row isn't the correct color (it should be white but it shows up a bright blue). This problem only shows up when I turn sorting on.
Everything else works fine. For example, I can change the header background to red and it turns red and the rest of the grid styles are applied appropriately.
Anybody have any clues about what the deal is? I've included code snippets below. I'm also fairly new to CSS. If anyone has any tips to make my CSS markup better in some way, let me know.
Thanks!
Here is the ASP.NET code. I can add ForeColor="White" to the HeaderStyle and everything works normally.
<asp:GridView ID="GridView1" runat="server" CssClass="grid"
AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1"
EmptyDataText="There are no data records to display." AllowSorting="True"
CellPadding="4" GridLines="Both">
<FooterStyle CssClass="grid-footer" />
<RowStyle CssClass="grid-row" />
<Columns>
<asp:BoundField DataField="Kingdom" HeaderText="Kingdom"
SortExpression="Kingdom" />
<asp:BoundField DataField="Phylum" HeaderText="Phylum"
SortExpression="Phylum" />
<asp:BoundField DataField="GenusSpeciesStrain" HeaderText="Genus species (strain)"
SortExpression="GenusSpeciesStrain" />
<asp:BoundField DataField="Family" HeaderText="Family"
SortExpression="Family" />
<asp:BoundField DataField="Subfamily" HeaderText="Subfamily"
SortExpression="Subfamily" />
<asp:BoundField DataField="ElectronInput" HeaderText="Electron Input"
SortExpression="ElectronInput" />
<asp:BoundField DataField="OperonLayout" HeaderText="Operon Layout"
SortExpression="OperonLayout" />
</Columns>
<PagerStyle CssClass="grid-pager" />
<SelectedRowStyle CssClass="grid-selected-row" />
<HeaderStyle CssClass="grid-header" />
<EditRowStyle CssClass="grid-row-edit" />
<AlternatingRowStyle CssClass="grid-row-alternating" />
And this is the content from style sheet I'm using:
body {
}
.grid
{
color: #333333;
}
.grid-row
{
background-color: #EFF3FB;
}
.grid-row-alternating
{
background-color: White;
}
.grid-selected-row
{
color: #333333;
background-color: #D1DDF1;
font-weight: bold;
}
.grid-header, .grid-footer
{
color: White;
background-color: #507CD1;
font-weight: bold;
}
.grid-pager
{
color: White;
background-color: #2461BF;
text-align: center;
}
.grid-row-edit
{
background-color: #2461BF;
}
I'm guessing the bright blue is very similar to the color of a hyperlink.
Making the gridview sortable means you'll have an a tag inside your header instead of just plain text.
This should sort it:
.grid-header a { color: White; background-color: #507CD1; font-weight: bold; }
This is the only way I can get it to work:
.HeaderStyle a
{
background-color: #DE7B0A;
color: White!important
}
I've noticed that the .aspx that gets rendered puts a style="color:#333333" tag on the link itself. Making the color option !important to override the default rendering is the only way I can get it to work.
Hope that helped someone.
The following worked for me. Add:
.grid-header th a
{
color: White;
}
The "th a" works regardless of AllowSorting.
I'm not sure how you're getting a white background on your header w/ or w/o the sorting because you have your grid-header background set that blue color (#507CD1) in your CSS:
.grid-header, .grid-footer { color: White; background-color: #507CD1; font-weight: bold; }
here's what it needs to be if you want the header background white (you'll need change the font color to something darker also):
.grid-header, .grid-footer { color: #000; background-color: #fff; font-weight: bold; }
and you also need to remove the ForeColor from the GridView's HeaderStyle attribute to be able to see the text in your header like so:
<HeaderStyle CssClass="grid-header" />
The header color in the stylesheet is correct: #507CD1 is bright blue. Where does it show up as white, then? In Visual Studio's designer? Do you mean for the header background to be white, or the text?
Also, it couldn't hurt to remove the ForeColor="White" from the markup. It's already in the stylesheet.
Update: I haven't read the question thoroughly enough, my apologies. The above is nonsense. (Or the question has been modified while I was composing my answer. Don't know)
Note that the addition of the th in style that James in Indy suggested , as in
.grid-header th a { color: White; }
will prevents links in pager section from being effected by setting you use for sort column.