Solved

Issue when creating scrollable gridview in asp.net

Posted on 2012-04-05
1
309 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

747 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

11 Experts available now in Live!

Get 1:1 Help Now