This is my grid view
<div class="gridView">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="MembershipID"
CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True" AllowSorting="True"
OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="5">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
THe result of that code is the grid view shows 5 rows and the paging is under the fifth row.
my problem
the pager is not shows so I have to scroll to show it.
my quesiton
how can I make the pager shows without using scroll?
Edit
this is the css
.gridView
{
max-height: 280px;
overflow: auto;
}
.gridView th
{
font-size: 12px;
font-weight: bold;
height: 25px;
white-space: nowrap;
}
The max-height and overflow in the "gridview" class is causing the scroll-bar to appear.
Remove those properties.
Related
Q1. I have a hyperlink field in a grid view as below :
<asp:HyperLinkField Text="Analyze" />
I want it to be underlined at all times and not only when I hover. How do I do this ?
Q2. I want the header texts of the gridView to be center alligned.
I tried: HeaderStyle-HorizontalAlign="Left" but it doesn't work.
I also tried making a css class with :
<style type="text/css">
.header-center{
text-align:center;}
</style>
but this also doesn't work.
I am basically trying to center the header text,nothing fancy,but it is not happening.
You have to replace your code in BodyContent with the below.
Note: you can add your own colors to the grid
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<style type="text/css">
#MainContent_GridView2 tbody tr th {
text-align: center;
background: #808080;
height: 40px;
}
#MainContent_GridView2 tbody tr {
height: 20px;
background-color: #CCC;
}
#MainContent_GridView2 tbody tr:hover {
background-color: #808080;
}
#MainContent_GridView2 tbody tr td {
text-align: center;
height: 30px;
}
.linkfield {
text-decoration: underline;
text-align: center;
}
</style>
<asp:GridView ID="GridView2"
runat="server"
AutoGenerateColumns="False"
AllowPaging="True"
AllowSorting="True"
PageSize="25"
Height="800px"
Width="1200px"
OnPageIndexChanging="GridView2_PageIndexChanging">
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="runId" DataTextField="runId" HeaderText="RunID" DataNavigateUrlFormatString="RunAnalysis.aspx?runId={0}" ItemStyle-Width="10%">
<ItemStyle Width="10%" CssClass="linkfield"></ItemStyle>
</asp:HyperLinkField>
<asp:BoundField DataField="prodDate" HeaderText="Date" DataFormatString="{0:MM/dd/yy}" ItemStyle-Width="10%">
<ItemStyle Width="10%"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="buildNumber" HeaderText="Build Number" ItemStyle-Width="10%">
<ItemStyle Width="10%"></ItemStyle>
</asp:BoundField>
<asp:HyperLinkField DataNavigateUrlFields="PercentAnalysed" DataTextField="PercentAnalysed" HeaderText="Percent Analysed" ItemStyle-Width="10%">
<ItemStyle Width="10%"></ItemStyle>
</asp:HyperLinkField>
</Columns>
<PagerSettings FirstPageText="First" LastPageText="Last" NextPageText="Next" PreviousPageText="Previous" />
</asp:GridView>
</asp:Content>
Hope this helps.
Hello!
Can anyone tell me how can I place any Gridview in center in Div or panel? I have applied following CSS but its does not working:
<asp:Panel ID="pnlGrid" CssClass="panel" runat="server">
<div style="text-align:center">
<asp:GridView ID="grdReqApproval" runat="server" AutoGenerateColumns="false" CssClass="SimpleGrid">
<Columns>
<asp:BoundField DataField="Approved By" HeaderText="Approved By" />
<asp:BoundField DataField="User Name" HeaderText="User Name" />
<asp:BoundField DataField="Approval Time" HeaderText="Approvel Time" />
</Columns>
</asp:GridView>
</div>
</asp:Panel>
.panel
{
width: 330px;
padding: 10px;
min-height: 20px;
border: 1px solid #dcdcdc;
margin-left:auto;
margin-right:auto;
}
HorizontalAlign property of Gridview can solve your problem
<asp:Panel ID="pID" runat="server">
<div>
<asp:GridView ID="gvID" runat="server" AutoGenerateColumns="false"
HorizontalAlign="Center">
<Columns>
...
...
</Columns>
</asp:GridView>
</div>
Check this is working for me , Ultimatly gridview get converted to table so the apply following stylesheet to your gridview which i applied to table
CSS
.centered-table {
margin-left: auto;
margin-right: auto;
}
HTML
<div>
<table class="centered-table" border="1">
<tr><td>Pekin</td> <td>Illinois</td></tr>
<tr><td>San Jose</td><td>California</td></tr>
</table>
</div>
JsFiddle Demo
Slight case of thread necromancy, but I was having the same problem and managed to fix it by aligning the code block rather than the gridview itself.
Basically I set the width of the element to 40%, and left to 30% (which means right is also 30%, because maths) and that positions the whole lot, text, grid and all into the middle of the page.
The css looks roughly like this
GridExample
{
position:absolute;
left:30%;
width:40%;
padding:0;
margin:0;
}
on your div text-align: center
as you see here, your class works. Just be sure its parent container is wider so it can center
http://jsfiddle.net/C7ybw/
#container{
width:800px;
border:1px solid #000;
}
.div_text_center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div class="div_text_center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:GridView ID="GridView1" runat="server" HorizontalAlign="Center">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
I want to know how can i make my asp.net gridview scrollable vertically and horizontally without using CSS and html.
this is my code on how I make gridview scrollable
in CSS:
div#scroll
{
border: 1px solid #C0C0C0;
background-color: #F0F0F0;
width: 584px;
height: 180px;
overflow: scroll;
position: relative;
left: 39px;
top: 813px;
}
in HTML:
<div id = "scroll">
<asp:GridView ID="tblitem" runat="server" CellPadding="4"
ForeColor="#333333" GridLines="None"
style="z-index: 1; left: -2px; top: 0px; position: absolute; height: 57px; width: 584px"
AutoGenerateSelectButton="True" Visible="False">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
</asp:GridView>
</div>
I dont want to use this because when I hide my gridview, the div scroll that I make is visible.
Try the below link it will help you... here they use Jquery to Scroll Grid view and it was very simple...
Scroll Grid View
You can use grid inside div and make this div scrollable....
This is how i did
JavaScript:
function onLoad() {
FreezeGridViewHeader('MyGridViewID', 'WrapperDiv');
}
function FreezeGridViewHeader(gridID, wrapperDivCssClass) {
/// <summary>
/// Used to create a fixed GridView header and allow scrolling
/// </summary>
/// <param name="gridID" type="String">
/// Client-side ID of the GridView control
/// </param>
/// <param name="wrapperDivCssClass" type="String">
/// CSS class to be applied to the GridView's wrapper div element.
/// Class MUST specify the CSS height and width properties.
/// Example: width:800px;height:400px;border:1px solid black;
/// </param>
var grid = document.getElementById(gridID);
if (grid != 'undefined') {
grid.style.visibility = 'hidden';
var div = null;
if (grid.parentNode != 'undefined') {
//Find wrapper div output by GridView
div = grid.parentNode;
if (div.tagName == "DIV") {
div.className = wrapperDivCssClass;
div.style.overflow = "auto";
}
}
//Find DOM TBODY element and remove first TR tag from
//it and add to a THEAD element instead so CSS styles
//can be applied properly in both IE and FireFox
var tags = grid.getElementsByTagName('TBODY');
if (tags != 'undefined') {
var tbody = tags[0];
var trs = tbody.getElementsByTagName('TR');
var headerHeight = 8;
if (trs != 'undefined') {
headerHeight += trs[0].offsetHeight;
var headTR = tbody.removeChild(trs[0]);
var head = document.createElement('THEAD');
head.appendChild(headTR);
grid.insertBefore(head, grid.firstChild);
}
//Needed for Firefox
tbody.style.height =
(div.offsetHeight - headerHeight) + 'px';
tbody.style.overflowX = "hidden";
tbody.overflow = 'auto';
tbody.overflowX = 'hidden';
}
grid.style.visibility = 'visible';
}
}
HTML MARKUP:
<div id="gvholder">
//My gridviewcontrol
<asp:GridView ID="MyGridViewID" runat="server" >
<Columns>
......
......
......
<Columns>
</asp:GridView>
</div>
CSS
.WrapperDiv {
border: 1px solid #CCCCCC;
height: auto;
max-height: 400px;
width: auto;
}
.WrapperDiv TH {
position:relative;
font-size:12px;
font-weight:bold;
}
.WrapperDiv TR
{
/*NeededForIe*/
height:0px;
}
.WrapperDiv td
{
font-size:12px;
}
#gvholder
{
float:left;
top:10px;
width:auto;
border:1px solid #CCCCCC;
margin-top:10px;
margin-left:10px;
box-shadow:1px 2px 9px black;
}
Wrap the gridview with a div like you mentioned you didn't want to do, but to get around the "hide my gridview, the div scroll that I make is visible" you wrap that with a panel and make the Panel.Visible=true or false.
For me that hides the scrollable GridView without leaving space.
i am trying to style my second column "mentor name" as i used css it give style to whole Grid i also tried "control styl css class = (some other css file)" and "item styl horizontal align=right" and also change property align = right by using # in css file but template field do not allow "id" to implement css my .aspx page and css ar below,
.mGrid {
width: 100%;
background-color: #fff;
margin: 0px 0 0px 0;
border: 0px #525252;
}
.mGrid table
{
border:0px;
}
.mGrid td {
padding: 2px;
border-width: 0px ;
background-color:#3A3F3E;
color: #fff;
text-align:left;
}
td#Mname {
text-align:left;
}
.mGrid th {
padding: 4px 2px;
color: #fff;
background-color:#3A3F3E;
border-width: 0px ;
font-size: 0.9em;
text-align:center;
}
<asp:GridView Width="300px" ID="GridView1" runat="server" AutoGenerateColumns="False"
Font-Size="10pt" OnRowCreated="GridView1_RowCreated" CssClass="mGrid">
<Columns>
<asp:BoundField DataField="mentor_id" HeaderText="Image" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/small_image.png" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mentor Name">
<ItemTemplate>
<asp:Label ID="Label1" Text='<%#Eval("mentor_FirstName")+ "</br> " + "<b>Experience: </b>"+Eval("mentor_experience") %> ' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
hopes for your suggestions thanks in advance
use td+td it will be applied to the Second td of the grid.
.mGrid td+td {
text-align:left !important;
}
.mGrid td+td+td {
text-align:left !important;
}
Here is a good post on this.
Styling the last td in a table with css
1My gridview code is like:
<asp:GridView runat="server"
ID="gvOpenProblems"
AutoGenerateColumns="true"
BorderColor="Black"
OnRowCreated="gvOpenProblems_RowCreated"
OnRowDataBound="gvOpenProblems_RowDataBound"
HeaderStyle-HorizontalAlign="Center"
Width="2000px"
AllowPaging="true"
PageSize="20"
OnPageIndexChanging="gvOpenProblems_PageIndexChanging">
<RowStyle HorizontalAlign="Left" />
<PagerStyle CssClass="gridpager"
HorizontalAlign="Left"
Width="200px" />
And CSS is like:
.gridpager, .gridpager td {
text-align: left;
color: Green;
font-weight: bold;
text-decoration: none;
border: 0;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.gridpager a {
color: Red;
font-weight: normal;
}
This works fine normally but when the number of pages is more than 10, and when I click on 10th page or 11th page all page numbers spread and go out of grid.
Is this a normal issue or is it an issue with the CSS?
The problem is that you're setting the width to 200px. You'd be forgiven for thinking that this applies to the containing table that the paging controls are held in, but it's not, it's the TD that the a & span tags are contained in.