CODEWITHSUNDEEP
c#asp.netgridview.net-2.0
Developer
Developer

Reputation: 8636

Is it possible to show headers while scrolling the gridview

I am using Gridview in my application. Grid view is binded with the data from the database with some header text. Now what i would like to have is when i scroll the grid view i would like to show the headers while moving the gridview how can i do this

This is what i wrote McArthey

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link href="StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Panel ID="pnlWrapper" runat="server" Height="300px" ScrollBars="Vertical" BorderWidth="1px">                
    <asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" CssClass="gvTable" AutoGenerateColumns="false" AllowSorting="true">                    
        <columns>
            <asp:BoundField DataField="id" HeaderText="id" HeaderStyle-Width="60" ItemStyle-Width="60" />
        </columns>
    </asp:GridView>
</asp:Panel>
    </div>
    </form>
</body>
</html>

stylesheet is as follows

TABLE.gvTable
{
    table-layout:fixed;
}
TABLE.gvTable TH
{    
    position:relative;
    border-top-width:0px;
    border-bottom-color:Black;
    background-color:#F5DEB3;
}

This is my sample source when i run and click on view source

  <div id="pnlWrapper" style="border-width:1px;border-style:solid;height:300px;overflow-y:scroll;">
 <div>
 <table class="gvTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="gvTheGrid" style="border-collapse:collapse;">
 <tr>
<th scope="col" style="width:60px;">id</th>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>
<td style="width:60px;">10</td>
</tr><tr>

Header shown when page loads

enter image description here

No header when scrolls down

enter image description here

Upvotes: 0

Views: 7319

Answers (3)

McArthey
McArthey

Reputation: 1646

There is an example here that works on IE8.

This was very useful to me since we are moving to IE8 here at work and I needed to get this working.

There are a few tricks with using this solution. It expects to use the <thead> and <tbody> tags which are not rendered by default in the GridView. In order to render them, you'll need to add something along the lines of the following which was suggested earlier by another.

// will add <thead> and <tbody>
gvTheGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

I have an example solution working here based upon that link that I sent via email.

Upvotes: 1

McArthey
McArthey

Reputation: 1646

Here's how we've done it.

  1. create an asp panel with a given height and specify vertical scrollbars
  2. put the gridview inside the panel and give it a class of myGridView

  3. in CSS create the following styles

    TABLE.myGridView { table-layout:fixed; }
    TABLE.myGridView TH { position:relative; }

  4. Specify the widths of each asp:BoundField like this:

    HeaderStyle-Width="85" ItemStyle-Width="85"

Here is an example of the code behind:

<asp:Panel ID="pnlWrapper" runat="server" Height="300px" ScrollBars="Vertical" BorderWidth="1px">                
    <asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" CssClass="gvTable" AutoGenerateColumns="false" AllowSorting="true">                    
        <columns>
            <asp:BoundField DataField="C" HeaderText="C" HeaderStyle-Width="60" ItemStyle-Width="60" />
        </columns>
    </asp:GridView>
</asp:Panel>

Here is the CSS:

TABLE.gvTable
{
    table-layout:fixed;
}
TABLE.gvTable TH
{    
    position:relative;
    border-top-width:0px;
    border-bottom-color:Black;
    background-color:#F5DEB3;
}

Here is the generated HTML:

<div id="ctl00_MainContent_pnlWrapper" style="border-width:1px;border-style:solid;height:300px;overflow-y:scroll;">
<div>
<table class="gvTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="ctl00_MainContent_gvTheGrid" style="background-color:WhiteSmoke;border-collapse:collapse;">
<tr style="font-size:Medium;">
<th scope="col" style="width:60px;">Select One</th>
<th scope="col" style="width:60px;">Number</a></th>
<th scope="col" style="width:60px;">Address</a></th>
<th scope="col" style="width:200px;">Phone</a></th>
</tr>
</table>
</div>               
</div>

You can see the classes for the CSS match between the code/generated source.

HTH

Upvotes: 0

KV Prajapati
KV Prajapati

Reputation: 94645

The simple solution is to wrap the content of ItemTemplate (You can use Template Column) using .

<ItemTemplate>
 <div style="height:100px; overflow:scroll">
   .....
 </div>
</ItemTemplate>

Take a look at CodeProject article : Scrollable GridView.

Upvotes: 1

Related Questions