Hello, I'm working with ASP.Net and I have aspx web sites made, in each of them I have a gridview with the column headers set and the sort capability enabled on them, and it works just perfect, but when I scroll down to see the rest of the records in the gridview and I click on the header to get the records sorted it does sort the records but the headers dissapear. Does anyone has an idea what can I do? I have tried everything recommended on the thousand forums talking about that, all of them in the css but hasn't work. I think is has to do something with the position in the gridview that I'm at because when I'm the first record and I click on the header to get the records sorted the headers remains in there always, but not when I scroll down. Please, any help will be highly appreciated.

 sorry, are you using a normal gridview?

what makes scrolling so special..

alternatively please provide some code samples so that we can help to debug

Thank you very much for helping me. Yes, the gridview is a normal gridview and the scrolling was not a big deal before but I've been asked to get this fix. When you click on each of the gridview headers the records are sort by the header clicked, and it works fine if you are at the top of the gridview, but if you scroll down a little bit, the headers are still there but if you click on one of them to sort the records by that column, they get sorted but the headers dissapear completly from the gridview. Here's some code:

<asp:Panel ID="Panel1" runat="server" ScrollBars="Vertical" Height="100%" Width="100%">
 <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
  <ContentTemplate>
   <asp:GridView ID="CPGridView" runat="server" AutoGenerateColumns="False" CellSpacing="1" CellPadding="2" Width="98%" CssClass="MyGrid2" GridLines="None" AllowSorting="true" >
    <FooterStyle cssclass="MyGridFooter"/>
    <Columns>
     <asp:TemplateField HeaderText="Action">
      <ItemTemplate>
       <asp:LinkButton ID="btnRemove" runat="server" CommandName="Delete" OnClientClick="return confirm('Are you sure you want to remove control plan link?');" style="color:blue;" Text="Remove" />
      </ItemTemplate>
      <FooterStyle HorizontalAlign="Center" />
      <ItemStyle HorizontalAlign="Center" />
     </asp:TemplateField>
     <asp:BoundField DataField="SysInspPlanID" HeaderText="Sys Insp Plan ID" ReadOnly="True">
      <FooterStyle CssClass="hiddencol" />
      <HeaderStyle CssClass="hiddencol" />
      <ItemStyle CssClass="hiddencol" />
     </asp:BoundField>
     <asp:BoundField DataField="ProductArchSysId" HeaderText="PG ARCH SYS ID" ReadOnly="True">
      <FooterStyle CssClass="hiddencol" />
      <HeaderStyle CssClass="hiddencol" />
      <ItemStyle CssClass="hiddencol" />
     </asp:BoundField>
     <asp:BoundField DataField="ProductGroupID" HeaderText="Product Group ID" ReadOnly="True" SortExpression="ProductGroupID" />
     <asp:BoundField DataField="ProductGroupName" HeaderText="Name" ReadOnly="True" SortExpression="ProductGroupName" />
     <asp:BoundField DataField="ProductGroupRevision" HeaderText="IQS Revision" ReadOnly="True" SortExpression="ProductGroupRevision" />
     <asp:BoundField DataField="ProductGroupArchTimeStamp" HeaderText="IQS Revision Date" ReadOnly="True" SortExpression="ProductGroupArchTimeStamp" />
     <asp:TemplateField HeaderText="Activity" SortExpression="InspPendingStatus">
      <ItemTemplate>
       <asp:Label ID="InspPendingStatus" runat="server" Text='<%#Eval("InspPendingStatus")%>' />
      </ItemTemplate>
     </asp:TemplateField>
     <asp:TemplateField>
      <ItemTemplate>
       <asp:Label ID="IsDeleteOK" runat="server" Text='<%#Eval("IsDeleteOK")%>' />
      </ItemTemplate>
      <FooterStyle CssClass="hiddencol" />
      <HeaderStyle CssClass="hiddencol" />
      <ItemStyle CssClass="hiddencol" />
     </asp:TemplateField>
    </Columns>
    <RowStyle CssClass="MyGridRow" />
    <HeaderStyle CssClass="MyGridHeader" />
    <AlternatingRowStyle CssClass="MyGridAltRow" />
   </asp:GridView>
  </ContentTemplate>
 </asp:UpdatePanel>
</asp:Panel>

.MyGrid2
 {font-weight: bold;
  font-family:Arial;
  font-Size: 0.85em;
  color:Black;}
 
.MyGridHeader
 {position: relative;
  background-color: #1C5E55;
  Color: White;
  font-family: Verdana;
  font-Size: 1.0em;
  top:expression(parentNode.scrollTop-2);
  z-index:99;}

.MyGridFooter
 {background-color: #1C5E55;}

.MyGridRow
 {background-color: #E3EAEB;}

.MyGridAltRow
 {background-color: White;}

.hiddencol
 {display: none;
     width: 0%;}

 it seems the header is supposed to float?

instead of this

HugoEnrique:

.MyGridHeader
 {position: relative;
  background-color: #1C5E55;
  Color: White;
  font-family: Verdana;
  font-Size: 1.0em;
  top:expression(parentNode.scrollTop-2);
  z-index:99;}

try

.MyGridHeader
 {
  background-color: #1C5E55;
  Color: White;
  font-family: Verdana;
  font-Size: 1.0em;
 
  z-index:99;}

and see if it works, if it does, add in one of the missing lines and test again, most probably one of the css screwed up

Thank you very much, it's solved now and let me tell you how I did it. Well you can freeze the header to stay there the whole time with the use of the css style page and getting it to order the column by clicking on it, (this function comes on the gridview properties options). Here's the css code for this and you just have to add it inside the <gridview> tags as <HeaderStyle CssClass="MyGridHeader" /> and of course in you css style sheet:

.MyGridHeader
{ position:absolute;
  background-color: #1C5E55;
  Color: White;
  font-family: Verdana;
  font-Size: 1.0em;
  z-index:99;
  top:expression(parentNode.scrollTop-2);
}

The other options besides position and top are just for the header looking but you need to set the position in absolute because this tells the application that the header has to stay there always and you need to set the top:expression with this telling it that it has to stay there in line 2 in any case the scroll bar has gone down. It's working. I hope this works for everyone! Thanks to everyone for your inspiration.

Thank you very much, it's solved now and let me tell you how I did it. Well you can freeze the header to stay there the whole time with the use of the css style page and getting it to order the column by clicking on it, (this function comes on the gridview properties options). Here's the css code for this and you just have to add it inside the <gridview> tags as <HeaderStyle CssClass="MyGridHeader" /> and of course in you css style sheet:

.MyGridHeader
{ position:absolute;
  background-color: #1C5E55;
  Color: White;
  font-family: Verdana;
  font-Size: 1.0em;
  z-index:99;
  top:expression(parentNode.scrollTop-2);
}

The other options besides position and top are just for the header looking but you need to set the position in absolute because this tells the application that the header has to stay there always and you need to set the top:expression with this telling it that it has to stay there in line 2 in any case the scroll bar has gone down. It's working. I hope this works for everyone! Thanks to everyone for your inspiration.

i am getting error in the CSS

.MyGridHeader
{ position:absolute;
  background-color: #1C5E55;
  Color: White;
  font-family: Verdana;
  font-Size: 1.0em;
  z-index:99;
  top:BLOCKED EXPRESSION; is not a valid expression for value property.

What should i change?

Thanks in advance

.MyGridHeader
{ position:absolute;
  background-color: #1C5E55;
  Color: White;
  font-family: Verdana;
  font-Size: 1.0em;
  z-index:99;
  top:BLOCKED EXPRESSION; is not a valid expression for value property

What should i change....