Is it possible to show headers while scrolling the gridview

Question

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

See following links: http://stackoverflow.com/questions/296020/how-can-i-lock-the-first-row-and-first-column-of-a-table-when-scrolling-possibly http://www.cubido.at/blogs/Lists/Posts/Post.aspx?ID=1259 — Brij, Sep 03 '11 at 06:14
Unable to view or download the content to use what should i do — Developer, Sep 03 '11 at 06:23

KV Prajapati · Answer 1 · 2011-09-03T06:34:25.473

1

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.

edited Sep 03 '11 at 06:34

answered Sep 03 '11 at 06:18

KV Prajapati

93,659
19
148
186

McArthey · Accepted Answer · 2011-09-05T19:25:30.607

1

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.

edited Sep 05 '11 at 19:25

answered Sep 05 '11 at 12:17

McArthey

1,614
30
62

So in place of ` – Developer Sep 05 '11 at 13:20
It is a solution that is a combination of CSS and JS so it's a bit more complicated but the site is very detailed with documentation and a forum if you get stuck. – McArthey Sep 05 '11 at 13:37

McArthey · Answer 3 · 2011-09-04T07:17:25.923

0

Here's how we've done it.

create an asp panel with a given height and specify vertical scrollbars
put the gridview inside the panel and give it a class of myGridView
in CSS create the following styles

TABLE.myGridView { table-layout:fixed; }
TABLE.myGridView TH { position:relative; }
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

edited Sep 04 '11 at 07:17

answered Sep 03 '11 at 06:34

McArthey

1,614
30
62

Can you post the design and css that you used i did not get the one as per you said – Developer Sep 03 '11 at 10:05
Doesn't work for me on any browser i am unable to see the header while scrolling – Developer Sep 03 '11 at 12:52
Let's see your code. I am looking at the application now and it works here. We're on IE7. I could paste the generated source in a message if that would help. – McArthey Sep 04 '11 at 07:04
@User: I think McArthey's solution doesn't work for you because you are probably not telling the GridView to render the TH tags on the table header. Do this in code behind: yourGrid.HeaderRow.TableSection = TableRowSection.TableHeader; and McArthey's solution should work for you. – Icarus Sep 04 '11 at 07:28
@User are you specifying the appropriate header tags in your BoundField or Template? – McArthey Sep 04 '11 at 07:50
Hi i just wrote as per given by you i did not use th and all – Developer Sep 04 '11 at 08:56
Try to wrap the tags with table tags so you'd have
. – McArthey Sep 04 '11 at 09:24
u mean `

` – Developer Sep 04 '11 at 13:12
if so it is not working can u mail me the working copy that you have done to me to dora.meka@gmail.com – Developer Sep 04 '11 at 13:13
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/3150/discussion-between-mcarthey-and-user) – McArthey Sep 04 '11 at 14:30
Looks like a problem with IE8's implementation of table-layout:fixed. http://stackoverflow.com/questions/5216591/broken-table-layout-in-ie8-with-embedded-tables-within-another-table It says to simply add the same CSS property to the outermost table and see if that helps. I don't have IE8 otherwise I'd check for you. – McArthey Sep 04 '11 at 16:52

Is it possible to show headers while scrolling the gridview

3 Answers3