Question

I have a weird problem with xul and javascript. I have tree with multiple rows of data in it. And I’ve to select every row that has active column set to "NO" and change background color for that entire row.

My javascript code is this:

function markInactive() {

    var tree = document.getElementById('bsTree');
    var treerow;

    for (var i = 0; i < tree.view.rowCount; i++) {

        if (tree.view.getCellText(i, tree.columns.getNamedColumn("bsActive")) == "NO") {

            treerow = tree.view.getItemAtIndex(i);
            treerow.firstChild.setAttribute('style', 'background: #FF0000');

        }  
    }  
}

Now the weird part. This doesn’t work because my jsconsole is returning with error that getItemAtIndex is not a function. I have no idea what to do.

Answer 1

I fixed this problem by building my own custom tree view and by editing getCellProperties method of the tree

getCellProperties: function (row, col, props) {

    if(tree.view.getCellText(row, tree.columns.getNamedColumn("bsActive")) == "NO"){

          var aserv=Components.classes["@mozilla.org/atom-service;1"].
                    getService(Components.interfaces.nsIAtomService);

          props.AppendElement(aserv.getAtom("makeItRed"));

    }
}

And CSS:

treechildren::-moz-tree-cell(makeItRed){
     background-color: #ff0000;
}