Solved

Issue when creating scrollable gridview in asp.net

Posted on 2012-04-05
1
310 Views
Last Modified: 2012-04-08
Actual result in header
Hello,

I have a gridview in an asp.net page that I am attempting to make scrollable.  When I do so (see code at bottom), the distribution of the header cells becomes skewed.  Can anybody please help me fix this issue.  Thanks a lot!


CSS Code:
.header
 {
   font-weight:bold;
position:absolute;
height: 20px;
width: 428px;
 }

Gridview in actual asp page:
**Note that the gridview itself is inside of a div with overflow scrolling**

 <td border: thin solid #000080"
                    valign="top"><div style="overflow-y:scroll; height: 200px" >
                    <asp:GridView ID="Students" onselectedindexchanged="StudentSelect"
                        runat="server" RowStyle-VerticalAlign="Bottom"

                        AllowSorting="True" AutoGenerateColumns="False" DataSourceID="StudentsList"
                        Height="30px" Width="430px" PageSize="25"
                            onrowdatabound="Students_RowDataBound">
                        <RowStyle Font-Size="Smaller" />
                        <Columns>
                        <asp:TemplateField ItemStyle-Width="10" > 
                            <ItemTemplate>
                                <asp:CheckBox runat="server" ID="chkYourCheckBoxField" />
                            </ItemTemplate>

<ItemStyle Width="3%"></ItemStyle>
                         </asp:TemplateField>
                            <asp:CommandField ShowSelectButton="True" ItemStyle-Width="10">
<ItemStyle Width="5%"></ItemStyle>
                            </asp:CommandField>
                            <asp:BoundField DataField="row_id" HeaderText="ID" ItemStyle-Width="10%"
                                SortExpression="row_id" InsertVisible="False" ReadOnly="True" >
<ItemStyle Width="10%"></ItemStyle>
                            </asp:BoundField>
                            <asp:BoundField DataField="Column1" HeaderText="Name" ItemStyle-Width="15%"
                                SortExpression="Column1" ReadOnly="True" >
<ItemStyle Width="15%"></ItemStyle>
                            </asp:BoundField>
                            <asp:BoundField DataField="age" HeaderText="Age"  ItemStyle-Width="5%"
                                SortExpression="age" >
<ItemStyle Width="5%"></ItemStyle>
                            </asp:BoundField>
                        </Columns>
                        <HeaderStyle CssClass="header" BackColor="#000066" ForeColor="#FFFF66" />
                        <EditRowStyle Font-Size="Smaller" />
                        <AlternatingRowStyle BackColor="#FFFF66" Font-Size="Smaller" />
                    </asp:GridView>
                    </div>
                    </td>

C# code to make the first row double so that the header doesnt cover it:
  protected void Students_RowDataBound(object sender, GridViewRowEventArgs e)


     {
        if (e.Row.RowType == DataControlRowType.DataRow)
         {
             if(e.Row.RowIndex == 0)
            e.Row.Style.Add("height","40px");
         }
          }

}
0
Comment
Question by:uconnfb13
1 Comment
 
LVL 19

Accepted Solution

by:
Manoj Patil earned 500 total points
ID: 37815508
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now