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.
Related
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.
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 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.
I have a simple question. I have a ListView which I have added a DataPager control to.
At present the DataPager is just plain numeric based. Just wondering, is it possible to add CSS styles to the numeric numbers IE have a 1px solid border around each number ect.
Any help would be greatly appreciated.
Insert NumericButtonCssClass to the NumericPagerField
in my example i call it datapagerStyle
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="20">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="False" ShowNextPageButton="False"
ShowPreviousPageButton="False" />
<asp:NumericPagerField NumericButtonCssClass="datapagerStyle" />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="False" ShowNextPageButton="False"
ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
and then in the stylesheet you make
.datapagerStyle
{
color:black;
border: 1px solid black;
}
I think this will solve your problem
<asp:DataPager ID="DataPager1" runat="server" PageSize="6" OnPreRender="DataPager1_PreRender">
<Fields>
<asp:NumericPagerField ButtonCount="5" NumericButtonCssClass="numeric_button" CurrentPageLabelCssClass="current_page" NextPreviousButtonCssClass="next_button"/>
<asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True"
ShowNextPageButton="false" ShowPreviousPageButton="False" ButtonCssClass="last_button" />
</Fields>
</asp:DataPager>
<style type="text/css">
.numeric_button{background-color:#384B69;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px; border:none;}
.current_page{background-color:#09151F;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;}
.next_button{background-color:#1F3548;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;}
.last_button{background-color:#1F3548;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;}
</style>
you'll need to look at <PagerTemplate> here's some information:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.templatepagerfield.pagertemplate.aspx
You can set CssClass for your control I think that can do what you want. I don't test it so just an ideal! Hope this helpfull 4 you!
CssClass="Pagging"
Pagging{
border:1px solid #000;
}
As Nguyen Hiep answered, setting a CSSClass to the control might help. Then look at the source code generated by the control. The reason the CssClass might not be removing the border could be that .NET has the tendency to wrap the generated HTML elements in extra divs or tables (the border might be set on a different element contained in that div) Once you find out which element has the css class, use CSS descendant selector to remove the border.
Because in .NET when it generate a control it automatically add prefix something like:
controlID = "data_customer" and became like that ctrl_1_etc_ + data_customer. So you must write all the long name of this control in CSS file and it work for sure! Hope this help you!
I don't know what a DataPager control is. But if it's some kind of pagination* class, and you want to do something like what's at the bottom of the StackOverflow New Questions page, then yes it is completely doable in CSS.
In most cases, the page numbers are just hyperlinks. So what you can do is find out what class the pagination control uses for the links, and style them the way you want. For instance, if the HTML looks something like this:
<div class="pagination">
<span class="page_cur">1</span>
2
3
4
5
...
</div>
Then you'll want to include something like this in your CSS:
<style>
div.pagination > span.page_cur, div.pagination > a.page_num {
display: block;
float: left;
padding: 4px;
}
div.pagination > span.page_cur {
background-color: #ddd;
border: 1px solid #ddd;
}
div.pagination > a.page_num {
background-color: #fff;
border: 1px solid #e0e0e0;
}
</style>
If you don't know the CSS selectors to use for the pagination numbers, I suggest taking a look at some online references on CSS selectors. The Firebug plugin for Firefox is also very helpful in identifying layout elements and the styles currently applied to them.
*StackOverflow doesn't like URLs with underscores in them apparently:
Pagination