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"/>
Related
I have two adjacent columns that are running together with no space between them. One is a dollar amount and the other a text field containing a name.
The gridview is defined with CellPadding and CellSpacing so don't expect this.
The column widths are defined as 6% and 12% respectively. The total of the width definitions of the columns is 70%.
Any suggestions?
Running Together
Grid Definition
First, it would be easier for the GridView header to be posted as plain text instead of an image. If I wanted to test your GridView I would have to type the code instead of copy/paste.
But the issue is probably css, or the lack thereof. It seems that the value is aligned to the right, but the padding is not applied. Which can happen is a BootStrap is used.
So create your own style for the GridView
<asp:GridView ID="GridView1" runat="server" CssClass="MyGrid" AutoGenerateColumns="false" Width="100%">
<Columns>
<asp:TemplateField ItemStyle-CssClass="FloatRight">
<ItemTemplate>
<%# Eval("Amount") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<%# Eval("Description") %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<style>
.MyGrid td {
padding: 3px;
}
.MyGrid .FloatRight {
float: right;
}
</style>
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.
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.
I have a Repeater control used to display uploaded images.
How can I show the images in the repeater horizontally? How can i give the caption to the bottom of picture in this?
assuming you have some code like this:
<asp:repeater ...>
</asp:repeater>
just inject "<itemtemplate>" with some html code with the look and feel you want to. nothing special about showing horizontal or vertical it just depends on what html tags you use inside item templates.
If you don't especially need a Repeater to do this, you can use a DataList instead and set the RepeatDirection="Horizontal"
how to display horizontal line after each row
<asp:DataList ID="dlstmovie" runat="server" onitemcommand="dlstmovie_ItemCommand" RepeatColumns="5" ItemStyle-CssClass="item1" RepeatDirection="Horizontal" onitemdatabound="dlstmovie_ItemDataBound" >
<ItemTemplate>
<asp:LinkButton ID="lnkimg" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>'>
<img src='<%=cinemaposter %><%#Eval("picturenm")%>' class="img" />
</asp:LinkButton>
<br />
<asp:LinkButton ID="lnkmovie" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>' Text='<%#(Eval("cinemanm").ToString().Length>10)?(Eval("cinemanm").ToString().Substring(0,10))+"":Eval("cinemanm").ToString()%>' CssClass="blacktext"></asp:LinkButton>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="m1" CommandArgument ='<%#DataBinder.Eval(Container.DataItem,"cinemaid")%>' Font-Underline="false" CssClass="blacktext">...</asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" CssClass="blacktext">
</asp:Label>
</FooterTemplate>
</asp:DataList>
You can build your ItemTemplate like:
<ItemTemplate>
<div class="floating">
<img src='<%# /* Code to Eval your image src from datasource */ %>' alt='' />
<span><%# /* Code to Eval your image caption from datasource */ %></span>
</div>
</ItemTemplate>
where the .floating class of the div is:
.floating { float:left; overflow:hidden; }
.floating img { display: block; }
I usually put a div for clear after a sequence of floating element, to reset the state of box model.
<div style="clear:both;"></div>
Depends on what you are using to display, i.e. if your pictures are in a div put float:left; on it, or use the DataList.
Like #numenor said in this other answer, it's just a matter of what html you use. Here, an example of how to acomplish what you need using html tables.
<table width="<%= this.TotalWidth %>">
<tr>
<asp:Repeater runat="server" ID="rptABC" OnItemDataBound="rptABC_ItemDataBound">
<ItemTemplate>
<td class="itemWidth">
Your item goes here and will be
displayed horizontally as a column.
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
Note that the width is handled with a server side property TotalWidth that calculates the total width needed based on, of course, the count of items repeater will display. Creating a CSS class to define the width of each item is also recomended to ensure proper layout.
protected string TotalWidth
{
get
{
//In this example this.Madibu.Materiales is the datasource for the Repeater,
//so this.Madibu.Materiales.Count is the column count for your table.
//75 must be equal to the width defined in CSS class 'itemWidth'
return (this.Madibu.Materiales.Count * 75).ToString() + "px";
}
}
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.