This question has been flagged
3754 Views

Odoo version: 10.0.

I am developing an Odoo JavaScript widget which uses a qweb template and incorporates a commercial JavaScript component called DayPilot. I have been following the guidelines at https://www.odoo.com/documentation/10.0/reference/javascript.html.

I want to render a full screen layout and in order to do that I need to get the dimensions of some of the DIVs in my qweb template. However I can't seem to find a way to execute code in my widget after the template has been rendered without using setTimeout, which is obviously not a great solution.

I currently have something like this:

var ParentWidget = Widget.extend({

start: function () {

var childWidget = new ChildWidget(this);

}

});

var ChildWidget = Widget.extend({

template: "qweb-template",

// snippity snip

init: function (parent) {

this._super(parent);

},

start: function (parent) {

var self = this;

return $.when(this._super()).done(function () {

// Initialise and populate DayPilot

// Resize DayPilot if the window is resized

$(window).on("resize", function (e) {

self.setHeight(); // setHeight calculates the dimensions of the other components on the page and fills the remainder with DayPilot

});

}).done(function () {

// If we don't delay, the value returned for the height of components within the template is 0.

// Why isn't the deferred object working?

window.setTimeout(function () {

self.setHeight();

}, 500)

});

}

core.action_registry.add("mymodule.homepage", ParentWidget);

As I understand it from the Odoo and Jquery documentation, the final block of code should only be executed after the widget has been rendered. However, in the Firefox debugger it executes before it has been rendered, thus the height of the components it checks is returned as 0. With the delay, the correct height is returned.

Basically, I want to know the best approach to get the height of HTML elements within the widget at the earliest possible time (e.g., once it has been rendered).

Any help gratefully received.

Avatar
Discard
Author

Just realised I missed a line, of course I am actually appending the generated content to the page, e.g. at the top it goes:

var childWidget = new ChildWidget(this);

childWidget.appendTo(this.$el);

I should also mention I have been digging through various bits of official and unnofficial Odoo code and unfortunately haven't really been able to find an example of where the deferred object is used to manipulate the DOM post-injection. If anyone has any examples I'd love to see them.