?
Solved

Issue when creating scrollable gridview in asp.net

Posted on 2012-04-05
1
Medium Priority
?
318 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 19

Accepted Solution

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

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

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…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month10 days, 8 hours left to enroll

764 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