Add callback to DOM element created in subclass of web.list.Column

Question

I am trying to modify the web_tree_image widget. Instead of just showing a small image in the column, I would like a larger image to appear when hovering or clicking. In order to achieve this, I am trying to add a callback after the widget is rendered, by overriding the start function, as explained in the documentation.

I therefore added the following code to web_tree_image.js:

openerp.web_tree_image = function (instance) {
    instance.web.list.Image = instance.web.list.Column.extend({
        // [...]
        start: function() {
            console.log("start called");
            // [... add callbacks ...]
        },
        // [...]
    });
};

However, the start function is never called, so this does not work.

I haven't fully understood the code path that usually leads to start being called, but it seems that it is somehow different for web.list.Column.

Should start be called and I am doing something wrong? Or is there another way of executing code after the DOM elements have been created?

Answer 1

While I still don't know why the start function is not called, this is a workaround:

openerp.web_tree_image = function (instance) {
    instance.web.list.Image = instance.web.list.Column.extend({
        // ...
        format: function (row_data, options) {
            // ...
            window.setTimeout(function() {
                console.log("DOM ready");
                // ... add callbacks ...
            }, 0);
            // ...
        },
        // ...
    });
};

By adding to the event queue with timeout 0, execution can be deferred until the relevant DOM elements have been created as explained here.