[Last Call] Learn how to a build a cloud-first strategyRegister Now


Gridview display problem

Posted on 2012-08-20
Medium Priority
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);
             table.style.cssText = grid.style.cssText;
             table.style.width = 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;
             scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";

Open in new window

Question by:Rad1
  • 3
  • 3
LVL 35

Accepted Solution

Robert Schutt earned 1500 total points
ID: 38315086
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

ID: 38315127
What do look for please?
LVL 35

Assisted Solution

by:Robert Schutt
Robert Schutt earned 1500 total points
ID: 38315133
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?
Veeam and MySQL: How to Perform Backup & Recovery

MySQL and the MariaDB variant are among the most used databases in Linux environments, and many critical applications support their data on them. Watch this recorded webinar to find out how Veeam Backup & Replication allows you to get consistent backups of MySQL databases.


Author Comment

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

Assisted Solution

by:Robert Schutt
Robert Schutt earned 1500 total points
ID: 38315158
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
Alan Warren earned 500 total points
ID: 38316050
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

ID: 38318626
thank you!!!

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
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…
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…
Suggested Courses
Course of the Month18 days, 1 hour left to enroll

829 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