How to use dojo.ready or dojo/domReady! with EWM custom presentation?
Hello,
We've written a non-trivial custom EWM presentation for a customer which extends dijit._Widget and dijit._Templated and uses dojox.grid.DataGrid.
It has a lot of functionality which all works great except we have one issue which we are unable to solve. Sometimes the DataGrid does not render on the EWM work item tab. Sometimes we need to click the EWM work item refresh icon to get it to load. Sometimes it won't load at all - especially if go to a work item we had accessed prior to the current work item we are working on.
It seems like a classic case of needing dojo.ready or dojo/domReady! - but I cannot get these to help at all.
1 - Where in our JS code would be put the dojo.ready? I've surrounded the following code with dojo.ready but with no success:
grid.placeAt();
grid.startup();
2 - Can I use dojo/domReady! with code that is not loaded with AMD? Do I have to use AMD compatible code?
3 - Sometimes with firefox or chrome debugger I can that the grid (table) HTML code is there. But it is display=none
4 - Is any of this well-documented and I just haven't found it yet.
5 - I've looked at existing EWM JS code such as
- com.ibm.team.rtc.foundation.web.ui.views.tags.DecoratedTagWidget.js
- com.ibm.team.rtc.foundation.web.ui.views.tags.explorer.ItemBrowser.js
these do not use dojo.ready or dojo/domReady!
Any / all help is appreciated.
Thanks,
Kevin
2 answers
Hello... The workitem code does not use dojo DataGrid. It also does not use the domReady calls of base dojo. Here are some things to try:
1) Check that the require statements include all the elements referenced. Sometimes if a require is not included then the order in which a component is loaded will determine if a non-specified required component is already loaded or missing, meaning that it will not render on first load but would render on refresh. The fix is to add all the require statements.
2) Use a setTimeout to defer loading of the grid until the target element is available in the dom. Something like (untested psuedocode)...
postCreate(): function {
...
waitAndRender(6000); // * 100 ms
...
}
waitAndRender: function(count) {
if (count<=0) {
console.log("Page not loaded for...");
return; // fail
}
window.setTimeout(dojo.hitch(this, function() {
if (this.elementLoaded()) {
this.doRenderGrid();
} else {
this.waitAndRender(count-1); // stop after so many tries
}
}), 100);
}
3) Use page lifecycle events. This is a hack since it uses internal events but there are a few events (see EventTopics.js) that are published...
// EventTopics.WORKITEM_PAGE_LOADED= "rtc/workitems/page/loaded"
// EventTopics.WORKITEM_VIEW_CHANGED= "workitem/view/changed"
var handle= dojo.subscribe("rtc/workitems/page/loaded", this, doRenderGrid);
// remember in the destroy method or sooner to unsubscribe
onDestroy... dojo.unsubscribe(handle).
4) If the widget itself is not loading, try a super simple version that just renders a text div or something to see that it is loading, then add in the required components until it fails.
For further analysis we would need to look at the code including the requires and postCreate, and how the contribution is specified.
Regards,
Lawrence
Comments
Please keep the post to one question thread.
DataGrid may be designed to be a singleton. The source code for it shows it uses some kind of store. Be sure the store is cleared and refreshed when switching items. Debug into DataGrid and see what it is doing. use the ?debug=true#action= to look at the code.
If the class itself is somehow being overwritten... then maybe try not using DataGrid or copy the DataGrid class locally and rename it and use that to see if it is some kind of dojo conflict.
Comments