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

Question

I am trying to change the web_tree_image widget. Instead of just showing a small image in a column, I would like a larger image to appear when you hover or click. To achieve this, I am trying to add a callback after rendering the widget by overriding the start function, as described in the documentation .

So I added the following code in 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 did not fully understand the code path that usually invokes the start call, but it seems to be somehow different for web.list.Column .

Should start be called and am I doing something wrong? Or is there another way to execute the code after creating the DOM elements?

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 events with a timeout of 0 to the queue, execution can be delayed until the corresponding DOM elements are created, as described here .

Answer 2

According to the documentation:

The new class can then be used as follows:

 // Create the instance var my_widget = new MyWidget(this); // Render and insert into DOM my_widget.appendTo(".some-div"); 

After completing these two lines (and any promise returned by appendTo () was allowed, if necessary), the widget is ready to use.

---

Note

insertion methods will launch the widget itself and return the result of start ().

If for some reason you do not want to call these methods, you will need to> call render () first in the widget, and then paste it into the DOM and run it.