DnD Icon vanishes if setVirtual() is invoked

[MWaltman]

While experimenting with your Tree Example to use the new setVirtual() method in DwtShell.js, I have noticed while the DnD move event continues to work, the DnD icon representing the object to be moved has vanished during the drag event. I suspect that this may simply be a z-index issue but would appreciate any suggestions to make the drag icon ‘reappear’.

Thank you

[MWaltman]

It has been a few days and I have had no responses so I thought I would post the resolution to my own question for anyone that may be mixing html and Zimbra Ajax using the DwtShell object in virtual mode.
NOTE: This fix has NOT been tested across the full Zimbra Ajax library.

Matt

___________


Problem: The 'Drag and Drop' Icon and the Tool Tip elements vanish on the Zimbra DwtTree object if the setVirtual method is invoked on the DwtShell object.

Solution: As the DnDIcon and ToolTip elements are created, append them to the document body, not the shell object if the shell is virtual.

Step 1. Modify the DwtShell interface in DwtShell.js to take a boolean indicating that the shell should be set to virtual when it is created. This will allow us to append the the tooltip singleton to the document body, not the shell as the DwtShell object is created.
ORIGINAL: function DwtShell(className, docBodyScrollable, confirmExitMethod, userShell, useCurtain) {
MODIFIED: function DwtShell(className, docBodyScrollable, confirmExitMethod, userShell, useCurtain, isVirtual) {

Step 2. In DwtShell.js add the call to 'setVirtual' just before the creation of the tooltip object if the new 'isVirtual' param is true
ORIGINAL:
// tooltip singleton used by all controls in shell
this._toolTip = new DwtToolTip(this);

MODIFIED:
// set virtual if required
if(isVirtual) this.setVirtual();

// tooltip singleton used by all controls in shell
this._toolTip = new DwtToolTip(this);


Step 3. In DwtToolTip.js, append the Tool Tip element to the document body, not the shell, if the shell is virtual.
ORIGINAL: this.shell.getHtmlElement().appendChild(this._div) ;
MODIFIED: this.shell.isVirtual() == true ? document.body.appendChild(this._div) : this.shell.getHtmlElement().appendChild(this._div) ;

Step 4. In DwtTreeItem.js modify function _getDnDIcon to append the DnDIcon element to the document body, not the shell, if it is virtual
ORIGINAL: this.shell.getHtmlElement().appendChild(icon);
MODIFIED: this.shell.isVirtual() == true ? document.body.appendChild(icon) : this.shell.getHtmlElement().appendChild(icon);

[KevinH]

Thanks Matt!