Freeze Header in ASP.NET 4.0 page - Gridlines don't align with Header v-Lines

can u post gridview source  and screen short of your  misalignment ?

Thank you!!!

So how can I set both the JQuery and the Gridview headerstyle and itemstyle to be the same?

Hi alanwarren,

Sorry but what line?  "remove that line from the script and see if it fixes the problem."

I have this code JScript, can you please point out where can I fix or adjust the code?

Thank you!

var GridId = "<%=GridView1.ClientID %>"; 
         var ScrollHeight = 600;
         window.onload = function () {
             var grid = document.getElementById(GridId);
             var gridWidth = grid.offsetWidth;
             var gridHeight = grid.offsetHeight;
             var headerCellWidths = new Array();
             for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
                 headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
             }
             grid.parentNode.appendChild(document.createElement("div"));
             var parentDiv = grid.parentNode;

             var table = document.createElement("table");
             for (i = 0; i < grid.attributes.length; i++) {
                 if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
                     table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
                 }
             }
             table.style.cssText = grid.style.cssText;
             table.style.width = gridWidth + "px";
             table.appendChild(document.createElement("tbody"));
             table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
             var cells = table.getElementsByTagName("TH");

             var gridRow = grid.getElementsByTagName("TR")[0];
             for (var i = 0; i < cells.length; i++) {
                 var width;
                 if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                     width = headerCellWidths[i];
                 }
                 else {
                     width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
                 }
                 cells[i].style.width = parseInt(width - 3) + "px";
                 gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
             }
             parentDiv.removeChild(grid);

             var dummyHeader = document.createElement("div");
             dummyHeader.appendChild(table);
             parentDiv.appendChild(dummyHeader);
             var scrollableDiv = document.createElement("div");
             if (parseInt(gridHeight) > ScrollHeight) {
                 gridWidth = parseInt(gridWidth) + 10;
             }
             scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";
             scrollableDiv.appendChild(grid);
             parentDiv.appendChild(scrollableDiv);

Select allOpen in new window

Also, with the above code, I got it to work but the Gridview displayed on the side of the Header instead of below the header????

Any idea how to fix this?

This all the CSS I am using and the image is attached.

I am using  .style6 for the Gridview.

[embed=file  597690]

 <style type="text/css">   
   .header
        {
        font-weight:bold;
        position:relative;        
        background-color:White;
        overflow:scroll        
}
         
       
           .style1
       {
           font-size: small;
       }
       .style2
       {
           width: 100%;
       }
       .style3
       {
           width: 338px;
       }
       .style4
       {
           width: 152px;
       }
       .style6
       {
           width: 344px;
       }
       .style7
       {
           width: 112px;
       }
       .style8
       {
           width: 24px;
       }
       .style9
       {
           width: 24px;
           height: 24px;
       }
       .style10
       {
           width: 155px;
       }
           </style>
        

Select allOpen in new window

Could it be the JavaScript causing it????

Ha,  thank you for a great help!!!!

I've requested that this question be closed as follows:

Accepted answer: 0 points for Rad1's comment #a38314885

for the following reason:

Excellent! A+++

I did not request a close of the question,  I accepted the answer and have it A+++.

The mobile app does not explain what the check marks are, and showed me that I was accepting the solution.

Please test your mobile app for verifications.

Thanks.

Rad

I've requested that this question be closed as follows:

Accepted answer: 0 points for Rad1's comment #a38314894
Assisted answer: 100 points for alanwarren's comment #a38308804
Assisted answer: 100 points for alanwarren's comment #a38313959
Assisted answer: 100 points for alanwarren's comment #a38314119
Assisted answer: 100 points for alanwarren's comment #a38314593
Assisted answer: 100 points for alanwarren's comment #a38314867

for the following reason:

Excellent

What is this???

I will reward the point from my computer.

Thanks Rad1,

Respectfully yours,
Alan ";0)

Alan (alanwarren) is a True Expert!!!
Thank you for all your help and support Alan!!!!

Rad1

Alanwarren,  

The only problem is can not enable sorting or add it, can I add it?

Hi Rad1,
To sort the scrollable gridview from the fixed header, you could do something like this:

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  Protected Sub GridView1_RowCommand(sender As Object, e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
    
    Dim sortdirection As SortDirection = Nothing
    
    If e.CommandName = "Sort" Then
      
      ' this would be nice, but didn't work
      ' GridView1.Sort(e.CommandArgument, Not (Convert.ToBoolean(GridView1.SortDirection)))
 
      ' so settled for this instead
      If GridView1.SortDirection = WebControls.SortDirection.Ascending Then
        sortdirection = WebControls.SortDirection.Descending
      Else
        sortdirection = WebControls.SortDirection.Ascending
      End If

      GridView1.Sort(e.CommandArgument, sortdirection)
      
    End If
  End Sub

  Protected Sub SortLinkButton_Click(sender As Object, e As System.EventArgs)
    Dim CommandEventArgs As New CommandEventArgs(sender.CommandName, sender.CommandArgument)
    Dim GridViewCommandEventArgs As New GridViewCommandEventArgs(sender, CommandEventArgs)
    GridView1_RowCommand(GridView1, GridViewCommandEventArgs)
  End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <table align="center" border="1" cellspacing="0" style="border-collapse:collapse;position:relative;left:-9px;">
        <tr>
          <!-- one td for each column in the resultset -->
          <td bgcolor="Navy" width="100" align="center" style="border:1px solid white;">
          </td>
          <td bgcolor="Navy" width="100" align="center" style="border:1px solid white;">
            <font color="White" size="4" face="Verdana"><b>
            <asp:LinkButton ID="ShortCtrySortLinkButton" runat="server" Text="ShortCtry" 
              CommandName="Sort" CommandArgument="ShortCtry" 
              onclick="SortLinkButton_Click" /></b></font>
          </td>
          <td bgcolor="Navy" width="400" align="center" style="border:1px solid white;">
            <font color="White" size="4" face="Verdana"><b>
            <asp:LinkButton ID="LongCtrySortLinkButton" runat="server" Text="LongCtry" 
              CommandName="Sort" CommandArgument="LongCtry" 
              onclick="SortLinkButton_Click" /></b></font>
          </td>

        </tr>
        <tr>
          <td colspan="3"> <!-- set to how many columns in the resultset -->
            <div style="position:relative; vertical-align: top; height:300px; overflow:auto;border:none;"">
              <asp:GridView ID="GridView1" runat="server" DataSourceID="CountrySqlDataSource" 
                AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" Width="100%" 
                        ShowHeader="False" AllowSorting="True" >
                <AlternatingRowStyle BackColor="White" />
                <Columns>
    
                  <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" ItemStyle-Width="100px"  />
                  <asp:BoundField DataField="ShortCtry" HeaderText="ShortCtry" SortExpression="ShortCtry" ItemStyle-Width="100px"  />
                  <asp:BoundField DataField="LongCtry" HeaderText="LongCtry" SortExpression="LongCtry" ItemStyle-Width="400px" />
                </Columns>
    
                <EditRowStyle BackColor="#2461BF" />
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                <RowStyle BackColor="#EFF3FB" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <SortedAscendingCellStyle BackColor="#F5F7FB" />
                <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                <SortedDescendingCellStyle BackColor="#E9EBEF" />
                <SortedDescendingHeaderStyle BackColor="#4870BE" />
    
              </asp:GridView>
            </div>
        </td>
        </tr>
      </table>
    </div>

   <asp:SqlDataSource 
        ID="CountrySqlDataSource" runat="server" 
        ConnectionString="<%$ ConnectionStrings:cnYourConnection %>" 
        SelectCommand="SELECT [ID],[ShortCtry],[LongCtry] FROM [dbo].[tblCountry]"
        >
    </asp:SqlDataSource>
  </form>
</body>
</html>

Select allOpen in new window

Alan ";0)

Thank you Alan!

I will try it when I get to my. Computer.

Thank you again.

Rad1

Hello Alanwarren,

Can I still ask a question here??? Or should I open a new question?

I have a question for you.

Rad