How can we add vertical scroll bar and fixed heading in gridview control ?? I tried to place gridview in a DIV and set fixed heading " TOP: expression(this.offsetParent.scrollTop); " .. but the heading width is wrapd out from out of the div and grid is stying in the div ... so there there is mismatching between gridview data and heading...

hope anyone can help me.

thanks for advance.

you could use a panel control for the scrollbar:

<asp:Panel ID="Panel1" runat="server" Height="400px" Width="200px" ScrollBars="Vertical">
 <asp:GridView ....>
 </asp:GridView>
</asp:Panel>

for the fixed heading I only have this ugly solution:

 <style type="text/css">
 <!--
 table th
 {
   position: relative;
   top: expression(this.parentNode.parentNode.
                   parentNode.scrollTop-1);
 }
 -->
</style>

cheers, marco

I have tried with multiple header which seems to be cutting off the few of header text.

Please check this out.


<style>

.test{
 position: relative;
   top: expression(this.parentNode.parentNode.
                   parentNode.scrollTop-1);
}
</style>
<div style="overflow:auto; height:150px;">


    <table width="1850" border="1" cellpadding="0" cellspacing="1">
      <tr class=test>
        <td colspan="2" bgcolor="#FFFFFF"><strong>1/05/06</strong></td>
        <td colspan="23" bgcolor="#FFFFFF"><strong>Work in Progress
          Schedule</strong></td>
        <td colspan="2" bgcolor="#FFFFFF"><strong>009-NE</strong></td>
      </tr>
      <tr class=test>
        <td width="100" rowspan="2" ><span> Status</span>&nbsp;
        </td>
        <td width="100" rowspan="2" bgcolor="#FFFFFF">Job #</td>
        <td width="250" rowspan="2" bgcolor="#FFFFFF">Client</td>
        <td colspan="3" bgcolor="#FFFFFF">Team</td>
        <td width="250" rowspan="2" bgcolor="#FFFFFF">Show Name</td>
        <td width="200" rowspan="2" bgcolor="#FFFFFF">City/
          Venue</td>
        <td width="200" rowspan="2" bgcolor="#FFFFFF">Booth
          Size</td>
        <td colspan="2" bgcolor="#FFFFFF">Show Dates</td>
        <td colspan="11" bgcolor="#FFFFFF">Project Scope</td>
        <td width="100" rowspan="2" bgcolor="#FFFFFF">Line of
          Business</td>
        <td width="50" rowspan="2" bgcolor="#FFFFFF">Project
          Type</td>
        <td width="50" rowspan="2" bgcolor="#FFFFFF">Ship Date</td>
        <td colspan="2" bgcolor="#FFFFFF">I&amp;D Schedule</td>
      </tr>
      <tr bgcolor="#FFFFFF"class=test>
        <td width="50">AE</td>
        <td width="50">AM</td>
        <td width="50">PM</td>
        <td width="50">Begin Show Date</td>
        <td width="50">End Show Date</td>
        <td width="20">EST</td>
        <td width="20">Design</td>
        <td width="20">CAD</td>
        <td width="20">GRAPH</td>
        <td width="20">FAB</td>
        <td width="20">WARE</td>
        <td width="20">SHIP</td>
        <td width="20">PORT</td>
        <td width="20">I&amp;O</td>
        <td width="20">Events</td>
        <td width="20">Trade Show</td>
        <td width="50">Setup Date</td>
        <td width="50">Dismantle Date</td>
      </tr>
      <tr>
        <td colspan="27" bgcolor="#FFFFFF" class="blueStrip">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">
<input name="chkEst" type="checkbox" value="1"></td>
        <td bgcolor="#FFFFFF">
<input name="chkDesign" type="checkbox" value="1"></td>
        <td bgcolor="#FFFFFF">
<input name="chkCad" type="checkbox" value="1"></td>
        <td bgcolor="#FFFFFF">
<input name="chkGraph" type="checkbox" value="1"></td>
        <td bgcolor="#FFFFFF">
<input name="chkFab" type="checkbox" value="1"></td>
        <td bgcolor="#FFFFFF">
<input name="chkWare" type="checkbox" value="1"></td>
        <td bgcolor="#FFFFFF">
<input name="chkShip" type="checkbox" value="1"></td>
        <td bgcolor="#FFFFFF">
<input name="chkPort" type="checkbox" value="1"></td>
        <td bgcolor="#FFFFFF">
<input name="chkIno" type="checkbox" value="1"></td>
        <td bgcolor="#FFFFFF">
<input name="chk" type="checkbox" value="1"></td>
        <td bgcolor="#FFFFFF">
<input name="chk" type="checkbox" value="1"></td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
      </tr>
</tbody>
</table>
</div>