Gridview display problem

Posted on 2012-08-20
Last Modified: 2012-08-21
The code below is a JavaScript which will Freeze Gridview Header,it works but the Gridview display on the side of the Header instead of below the header????

Any idea how to fix this?

 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;
             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);
    = gridWidth + "px";
             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";

             var dummyHeader = document.createElement("div");
             var scrollableDiv = document.createElement("div");
             if (parseInt(gridHeight) > ScrollHeight) {
                 gridWidth = parseInt(gridWidth) + 10;
    = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";

Open in new window

Question by:Rad1
    LVL 35

    Accepted Solution

    I just tested it and displays ok in IE9, FireFox and Chrome. It seems to be off by a few pixels due to the scrollbar being added to the table body but otherwise fine. Check your css for any position attributes maybe?

    Author Comment

    What do look for please?
    LVL 35

    Assisted Solution

    by:Robert Schutt
    Well you said the table displays beside the header so maybe in a css file, style block or inline style there is a style attribute "position: relative"?

    That's just a first thought, other thoughts:
    - which make and version browser do you use? try another browser as well.
    - do you have other javascripts running on the same page?

    Author Comment

    Yes I have another JavaScript running on the same page.
    LVL 35

    Assisted Solution

    by:Robert Schutt
    Ok, so can you try disabling that and non-related css for the moment and see if the problem goes away?
    LVL 26

    Assisted Solution

    by:Alan Warren
    Hi Rad1,
    I suspect your gridview is inheriting a "float:right" style from a parent element.

    Check the elements that your gridview is nested within for float:right style attributes.


    Author Closing Comment

    thank you!!!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
    The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
    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…

    760 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

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now