Question

I have a pretty complex implementation of an old infragistics UltraWebGrid. Which I am trying to force into browser compatability, even though they just tell me to upgrade. My grid is not rendering rows for a certain grid for non IE browsers. I have traced the error to some built in javascript which I will add below. I think I can force the grid to work by adding a tbody element to the grids html table before It attempts to render the dynamically added rows. My logic for coming across this idea is below. How would I go about doing this?

As per This SO question, only IE automatically ads a tbody element to an empty table. Other browsers require at least one row for a tbody element to exist. The javascript error that seems to be preventing this grid from rendering is the inability to get the tbody element of the main grid table. This should be able to be fixed by forcing a tbody element in the table via javascript if the browser is anything other than IE.

The old infragistics grid’s built in javascript seems to assume this tbody element will be there in an empty grid. Because of this, my page is unable to load the rows of the grid in non IE browsers because the javascript is calling an element that doesnt exist.

Breaking javascript:

(this breaks at the last line for non IE browsers. I assume because there is no tbody element)

var strTransform = this.applyXslToNode(this.Node);
if (strTransform)
{
    var anId = (this.AddNewRow ? this.AddNewRow.Id : null);
    this.Grid._innerObj.innerHTML = "<table style=\"table-layout:fixed;\">" + strTransform + "</table>";
    var tbl = this.Element.parentNode;
    igtbl_replaceChild(tbl, this.Grid._innerObj.firstChild.firstChild, this.Element);
    igtbl_fixDOEXml();
    var _b = this.Band;
    var headerDiv = igtbl_getElementById(this.Grid.Id + "_hdiv");
    var footerDiv = igtbl_getElementById(this.Grid.Id + "_fdiv");
    if (this.AddNewRow)
    {
        if (_b.Index > 0 || _b.AddNewRowView == 1 && !headerDiv || _b.AddNewRowView == 2 && !footerDiv)
        {
            var anr = this.AddNewRow.Element;
            anr.parentNode.removeChild(anr);
            if (_b.AddNewRowView == 1 && tbl.tBodies[0].rows.length > 0)
                tbl.tBodies[0].insertBefore(anr, tbl.tBodies[0].rows[0]);
            else
                tbl.tBodies[0].appendChild(anr);
        }
        this.AddNewRow.Element = igtbl_getElementById(anId);
        this.AddNewRow.Element.Object = this.AddNewRow;
    }
    this.Element = tbl.tBodies[0];
    this.Element.Object = this;

Answer 1

I would recommend adding the tbody when you set innerHTML at the top. Check if strTransform already contains a tbody, and if it doesn’t, add one yourself. Something like:

var tadd1 = '';
var tadd2 = '';
if (!(/\<tbody\>/.test(strTransform))) {
    tadd1 = '<tbody>';
    tadd2 = '</tbody>';
}
this.Grid._innerObj.innerHTML =
    "<table style=\"table-layout:fixed;\">" + tadd1 + strTransform + tadd2 + "</table>";