?
Solved

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

Posted on 2012-08-17
25
Medium Priority
?
2,156 Views
Last Modified: 2012-10-15
Hi,

I am using the below JavaScript to implement a Freeze Header in ASP.NET 4.0 page.  I have enabled both Grid-Lines in the Gridview.  The issue is that the Gridview vertical lines don't align with the Header Vertical lines in Gridview.  

How can I fix this problem???

Thank you,
Rad1


 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/ScrollableGridPlugin.js" type="text/javascript"></script>
   
     <script type="text/javascript" language="javascript">
         $(document).ready(function () {
             $('#<%=GridView1.ClientID %>').Scrollable();
         })

Open in new window

0
Comment
Question by:Rad1
  • 16
  • 8
25 Comments
 
LVL 18

Expert Comment

by:Rajar Ahmed
ID: 38307243
can u post gridview source  and screen short of your  misalignment ?
0
 
LVL 26

Assisted Solution

by:Alan Warren
Alan Warren earned 2000 total points
ID: 38308804
sounds like the borderwidth for the headerstyle and itemstyle differ.

Alan ";0)
0
 

Author Comment

by:Rad1
ID: 38313843
Thank you!!!

So how can I set both the JQuery and the Gridview headerstyle and itemstyle to be the same?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 26

Assisted Solution

by:Alan Warren
Alan Warren earned 2000 total points
ID: 38313959
Hi Rad1,
the JQuery and the Page Gridview are one and the same animal,  JQuery references the asp control by grabbing it's <%=GridView1.ClientID %>, you should only need to modify the template styles of the Gridview control on your aspx page.

Another possible culprit for mis-alignment is the $('#<%=GridView1.ClientID %>').Scrollable(), maybe as a temporary measure, remove that line from the script and see if it fixes the problem.

Alan
0
 

Author Comment

by:Rad1
ID: 38313990
Hi alanwarren,

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

Assisted Solution

by:Alan Warren
Alan Warren earned 2000 total points
ID: 38314119
hi Rad1,
I was referring to this line in the javascript function:
$('#<%=GridView1.ClientID %>').Scrollable();
but removing that may actually defeat the purpose, being to have a scrollable grid.

Found this page discussing the issue you describe:
http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-using-jQuery-Plugin.aspx
I noticed that if the length of a header columns content is greater than the length of a corresponding columns cell content the alignment is completely wrong.br br Is there anyway to fix itbr Thanks


To which the author of the scrollable grid plug replied:
Thanks for bringing the issue to my notice. The issue has been fixed.
Download the sample again it has the updated plugin

I think this may be the download link:
http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-inside-ASPNet-UpdatePanel-using-jQuery-Plugin.aspx

Alan
0
 

Author Comment

by:Rad1
ID: 38314243
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);

Open in new window

0
 

Author Comment

by:Rad1
ID: 38314416
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?
0
 
LVL 26

Assisted Solution

by:Alan Warren
Alan Warren earned 2000 total points
ID: 38314593
Any chance of posting a screenshot and possibly a sample of your CSS style sheet used for styling the gridview?

If the gridview is showing to the right, there is most probably a float issue with the CSS stylesheet, but without the CSS it' hard to say what it may be.

Alan
0
 

Author Comment

by:Rad1
ID: 38314637
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>
        

Open in new window

Gridview
0
 

Author Comment

by:Rad1
ID: 38314641
Could it be the JavaScript causing it????
0
 
LVL 26

Assisted Solution

by:Alan Warren
Alan Warren earned 2000 total points
ID: 38314867
Hi Rad1,
I cannot reproduce your error here.
<%@ 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">
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript">
    var GridId = "<%=GridView1.ClientID %>";
    var ScrollHeight = 600;

    function pageLoad() {
      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);
    }
     
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div style="position:relative; vertical-align: top; height:300px; overflow:auto; width:600px;">
    
      <asp:GridView ID="GridView1" runat="server" DataSourceID="CountrySqlDataSource" 
        AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" 
        GridLines="Both" Width="100%" >
        <AlternatingRowStyle BackColor="White" />
        <Columns>
    
          <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID"  />
          <asp:BoundField DataField="ShortCtry" HeaderText="ShortCtry" SortExpression="ShortCtry"  />
          <asp:BoundField DataField="LongCtry" HeaderText="LongCtry" SortExpression="LongCtry" />
        </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>

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

    </div>
  </form>
</body>
</html>

Open in new window

Snapshot of scrollable gridview using asp .net and javascript
0
 

Author Comment

by:Rad1
ID: 38314885
Ha,  thank you for a great help!!!!
0
 

Author Comment

by:Rad1
ID: 38314893
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+++
0
 

Author Comment

by:Rad1
ID: 38314894
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
0
 

Author Comment

by:Rad1
ID: 38314899
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
0
 

Author Comment

by:Rad1
ID: 38314900
What is this???
0
 

Author Comment

by:Rad1
ID: 38314902
I will reward the point from my computer.
0
 
LVL 26

Accepted Solution

by:
Alan Warren earned 2000 total points
ID: 38314905
Hi Rad1,
to do the same with no javascript and fixed header:
<%@ 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">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Scrollable gridview with fixed header</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;">
            <font color="White" size="4" face="Verdana"><b>ID</b></font>
          </td>
          <td bgcolor="Navy" width="100" align="center" style="border:1px solid white;">
            <font color="White" size="4" face="Verdana"><b>ShortCtry</b></font>
          </td>
          <td bgcolor="Navy" width="400" align="center" style="border:1px solid white;">
            <font color="White" size="4" face="Verdana"><b>LongCtry</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" 
        GridLines="Both" Width="100%" ShowHeader="false" >
        <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:YourConnection %>" 
        SelectCommand="SELECT [ID],[ShortCtry],[LongCtry] FROM [dbo].[tblCountry]"
        >
    </asp:SqlDataSource>
  </form>
</body>
</html>

Open in new window

Scrollable ASp .Net GridView with fixed header and no javascriptAlan ";0)
0
 
LVL 26

Expert Comment

by:Alan Warren
ID: 38314914
Thanks Rad1,

Respectfully yours,
Alan ";0)
0
 

Author Closing Comment

by:Rad1
ID: 38317449
Alan (alanwarren) is a True Expert!!!
Thank you for all your help and support Alan!!!!

Rad1
0
 

Author Comment

by:Rad1
ID: 38318641
Alanwarren,  

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

Expert Comment

by:Alan Warren
ID: 38318979
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>

Open in new window

Scrollable and sortable GridView with fixed headers; without javascriptAlan ";0)
0
 

Author Comment

by:Rad1
ID: 38319028
Thank you Alan!

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

Thank you again.

Rad1
0
 

Author Comment

by:Rad1
ID: 38499528
Hello Alanwarren,

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

I have a question for you.

Rad
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month17 days, 2 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question