Javascript's setExpression is the biggest problem for me. Any solution to overcome this.

Question

I am trying to freeze my gridview header for last 2 days and got this link and many other links too provided to me on Stackoverflow as well as from googling. This worked fine when i used it on IE 6,7 and under compatibility mode in IE8 but in normal mode, this code is not working.

This line is giving me an error. I want to implement this functionality.

trs[x].style.setExpression("top",  "this.parentElement.parentElement.parentElement.scrollTop + 'px'");

On reading comments, I came to know that scrollableTable.js uses setExpression Method which has been depreciated in IE8.

Previously I didn't have any idea about the problem. I hope there would be some alternative to setExpression method.

How to replace setExpression method with some other alternative in this code

function ScrollableTable (tableEl, tableHeight, tableWidth) {

this.initIEengine = function() {

    this.containerEl.style.overflowY = 'auto';
    if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
        this.tableEl.style.width = this.newWidth - this.scrollWidth + 'px';
    } else {
        this.containerEl.style.overflowY = 'hidden';
        this.tableEl.style.width = this.newWidth + 'px';
    }

    if (this.thead) {
        var trs = this.thead.getElementsByTagName('tr');
        for (x = 0; x < trs.length; x++) {
            trs[x].style.position = 'relative';
            trs[x].style.setExpression("top", "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
        }
    }

    if (this.tfoot) {
        var trs = this.tfoot.getElementsByTagName('tr');
        for (x = 0; x < trs.length; x++) {
            trs[x].style.position = 'relative';
            trs[x].style.setExpression("bottom", "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
        }
    }
    eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
};

Answer 1

For the same think is better to use jQuery and do the same job with jQuery that is going to work on all browsers and drop setExpression.

Something like:

var MyMainControl = $(".StyleOf");
MyMainControl.attr("top", MyMainControl.parent(".TheKeeper").offset().top );

or if you have many

jQuery(document).ready(function() 
{
    jQuery(".StyleOf").each(function(i, selected) {
        var MyMainControl = $(selected);
        MyMainControl.attr("top", MyMainControl.parent(".TheKeeper").offset().top );
    }
}

I think that the html is something like

<div class="TheKeeper">
 <div>
   <div>
     <div class="StyleOf"></div>
   </div>
  </div>
</div>

The setExpression is for make css compatible with ie6.

Of cource you can get some other ready Header Grids... :)

Answer 2

You should try the http://fixedheadertable.com/ jQuery plug-in instead. This should eliminate any cross-browser problems and be more future-proof.