How to make the frozen grid view header

[mvmashraf]

The simplest way i follows...........

step 1: place the grid view in a DIV tag...

ie: eg: <div id="divdatagrid" style="overflow: scroll; width: 750px; height: 265px">

Step 2 : on load event call the following java script

<script language="JavaScript" type="text/javascript">
function FreezeGridHeader()
{
var arRows = document.getElementById('ctl00_WorkArea_gvRFPs').r ows;
var oDiv = document.getElementById('divdatagrid');
arRows[0].style.position = "relative";
arRows[0].oParentDiv = oDiv;
arRows[0].style.setExpression("posTop", "oParentDiv.scrollTop-2");
arRows[0].style.zIndex = 30;

}
window.onload=FreezeGridHeader;
</script>

Here "ctl00_WorkArea_gvRFPs" is the gridview name.
"divdatagrid" is the surrounding div name..

Thanks...
@shraf
S.E.... Cochin

[Plater]

What do you mean by frozen gridview headers? Mine never move already?

[Frinavale]

fought with this problem for a while and tried many things like setting the header's position="absolute" etc...etc.

The way I solved this problem was to make a table above the GridView that was static and then placed the GridView into a <div> that allowed scrolling.

Eg:

<asp:Panel runat="server" ID="Container" style="width:300px">
     <table width="100%" border="0" cellspacing="0">
           <tr><td> <%=FirstColumnHeader%></td></tr>
           <tr><td> <%=SecondColumnHeader%></td></tr>
           <tr><td> <%=ThirdColumnHeader%></td></tr>
     </table>
     <asp:Panel runat="server" ID="Scroll" style="height:100px; overflow:auto;">
          <asp:GridView ID="MyGridView" runat="Server>
            <Columns>
               <asp:BoundField DataField="FirstColumn></asp:BoundField>
               <asp:BoundField DataField="SecondColumn></asp:BoundField>
               <asp:BoundField DataField="ThirdColumn></asp:BoundField>
            </Columns>
           </asp:GridView>
     </asp:Panel><!--Closing the Scrolling area-->
</asp:Panel><!--Closing the Containing area-->
 

The asp code: "<%=FirstColumnHeader%>" prints the value of a property named FirstColumnHeader that returns a string representing the First Column's Header.

Using a table for the header was a little hard to line up with the GridView (the lines were off by a couple of px) but this method avoided problems that occur with setting the GridView's Header to a position of absolute and then scrolling it to the correct position using JavaScript.

-Frinny

[Plater]

I still don't know what the situation you are trying to solve here is?
Are you trying to make the gridview header row "float" down when you scroll down?