Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 322
  • Last Modified:

Issue when creating scrollable gridview in asp.net

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
uconnfb13
Asked:
uconnfb13
1 Solution
 
Manoj PatilSr. Software EngineerCommented:
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now