Question

I have a dynamically constructed editable XUL tree.
The problem is – how is one supposed to listen and capture the changed cells?

I detect the submitting of the edited value by capturing blur event of the tree.inputField, any other events are not working.
At least it works, but is there an easy way to retrieve new value?

Should it really be as hackish as getting the Tree element, calculating the current cell, and querying its new value?

Answer 1

I guess that “dynamically constructed” means that you dynamically generate DOM elements for the tree items. Then you should be able to register a DOMAttrModified event handler on the <treechildren> tag and listen to changes of the label attribute of the tree cells.

However, the usual approach is to have the tree entirely dynamic. You need an object implementing nsITreeView (see https://developer.mozilla.org/En/NsITreeView). You assign that object to the tree.view property. And that object defines how many rows your tree has, what to display in which cell, what properties a row/column/cell should have, all without having any DOM nodes inside <treechildren>. Unfortunately, it is a complicated interface to implement, especially because of the hierarchical nature of the trees. If you have a plain list many methods become trivial however.

Two methods are particularly interesting. isEditable() allows you to determine whether a particular tree cell should be editable. And setCellText() is called whenever a cell has been edited.

If you don’t want to reimplement nsITreeView, wrapping the default view should also be possible. Something like this:

var oldView = tree.view;
var newView = {
    __proto__: oldView,
    setCellText(row, col, value)
    {
        oldView.setCellText(row, col, value);
        alert("Text changed for a tree cell!");
    }
};
tree.view = newView;