[SOLVED] Dynamic dropdown menu

[kganesh]

Hello,

Can we create a dynamic dropdown menu in Zimbra? I have created a menu using DwtButton and DwtMenu. It is being populated from server data during initialization i.e. only once when this menu is instantiated however my requirement is to populate it dynamically, say populate it everytime user clicks on it.

Can somebody help me on this?

Thank you!

[kganesh]

Hi,

Let me put my work briefly -

My JS class extends DwtComposite. During instantiation it renders the HTML using a template. Rendering method adds DwtButton and calls for menu AjxCallback. This callback creates dropdown menu which then be set to DwtButton.
Problem is - this callback gets a call only once. If I add a button listener to DwtButton then menu callback doesn't work.Thus I can either add menu AjxCallback or a button listener not both.

Is there any way to add a listener which will help to render the udpated HTML everytime user clicks on the menu button. What I am looking for is - to have a server call everytime user clicks on menubutton, fetch udpated data and display it in menu.

Any pointers, examples on this are highly appreciated.

Thanks!

[kganesh]

Following is the code snippet which will give an idea of my work -

DynamicDropdownMenu = function(parent, id) {

DwtComposite.call(this, {parentarent,
className:"DynamicDropdownMenu", id:id});
//render menu - called only once
this._createHtml();

};

DynamicDropdownMenu.prototype._createHtml =
function() {
//Render the template
this.getHtmlElement().innerHTML = AjxTemplate.expand
("share.Widgets#DynamicDropdownMenuTemplate", {id:this._htmlElId});
//id for dynamic menu btn
var dynamicMenuBtnId = this._htmlElId + "_dynamicMenuButton";
//dynamic menu btn
var dynamicMenuBtn = document.getElementById(dynamicMenuBtnId);
//if get an div id from template then create the btn and add it to div
if (dynamicMenuBtn ) {
this._dynamicMenuButton = this._addButton({ tdId: "_dynamicMenuButton",buttonId:"zb__DYNAMIC__ME NU", lbl: "Default Menu Item", icon:"Person" });
//menu is a callback
var menu = new AjxCallback(this, this._dynamicMenu);
//set menu to dynamic menu btn
this._workspaceMenuButton.setMenu(menu, false,
DwtMenuItem.RADIO_STYLE);
this._dynamicMenuButton.reparentHtmlElement(worksp aceMenuBtnId);

}else{
//error case
alert("There is some error in Dynamic Menu initialization.");

}
};

DynamicDropdownMenu.prototype._dynamicMenu = function(){

//create DwtMenu
//items details is stored in array
//iterate over array and add items to the menu
//register listeners for items
//return menu

};

As can be seen above, menu generation happens only once i.e. during instantiation. Is there any way to do it at real time say when user clicks on DynamicMenuButton. I tried this by adding a listener to button however it affects the menu associated with button. After adding button listener it leaves tiny space for a user (down arrow on menu) to click to expand the menu. I think, it could be because now there are two listeners associated with button and button listener takes priority over menu listener.

Any pointer on this?

[kganesh]

I found an easy resolution - created a listener and registered it for dropdown button's selection listener and dropdown menu listener. This listener whenever invoked makes a synchronus server call for data and then calls button.popup().