I am using the Toolbar control .. one of the toolbar items is a dropdownmenu item. I have created a context menu and passed its ID to the dropedownMenuItemID .. The problem is that I have to click on a very narrow area of the toolbar item for the drop down to appear ...

This has driven me crazy for the last three hours .. Please help ..

Also, can the drop down menu appear on hover in addition to the click event ?

Thanks for your support but I think this should be fixed without having to write java script code ..

By the way, i have used the below function to show the context menu but it now shows on any on the item tool bar click .. Now, do I have to go through the pain of knowing which toolbaritem triggered the click and then display its related context menu ? is there any way around this ?

function on_item_click(toolBar, toolBarItem, subMenu)
{
eo_ShowContextMenu(event, 'ContextMenu1');
}

Thanks .. I get your point .. I think you are right .. but don't you also believe that the above situation in my screen shot is a bug ? I mean the clicking is not working on all of the toolbar item ! ..

Also, now I am having a second issue which is the context menu is appearing relative to my mouse click so if i click on top of the item, the context will appear over the toolbar item itself and so forth .. can you tell me please if I can make the context always start rendering from below the toolbar item just as it looks like in the screen shot in my first post above ?

Thanks again

Hi,

That is not a bug. See here for a working example:

http://demo.essentialobjects.com/Demos/Tool%20Bar/Features/Drop%20Down%20Item/Demo.aspx

Note that this sample has a drop down menu for the "New" item. The item displays a drop down triangle icon next to the toolbar text. This is done by using a CSS background image aligned to the right on the toolbar item's styles (NormalStyle, HoverStyle and DownStyle). You can check the sample source code for more details. You can also set the toolbar item's DropDownButtonWidth to control the width of the clickable area that would open you drop down menu.

In order to align your menu to the toolbar item, you will need to pass the toolbar item's root DOM element to eo_ShowContextMenu. It will be something like this:

eo_ShowContextMenu(toolBarItem.getElement(), 'ContextMenu1');

You can further fine tune the position of the context menu by setting OffsetX and OffsetY on the "TopGroup" of your ContextMenu object.

There is no such thing as thing will go ugly if you do JavaScript. You just have to do it right. In your case you copied the code from the document but did not understand that “event” is not valid for FireFox in your context (the samples’ context is in oncontextmenu handler, your case is not).

The basic rule is if you wanted something advance, then you will need to code for it. If you do not wish to code for it, then you will need to settle with basic/default things. We can point you to the right direction most of the time but we are a component vendor and there is no way we can make a product so nobody will ever need to code. (Otherwise your boss would just buy our product and ask you go home. : P). Our goal is to make a product that is both easy to use for beginners and very powerful/flexible for advanced users at the same time.

Thanks!

One final question please, is there a way to pass the context submenu id when the toolbar item is clicked ? the current situation is that i'm passing the entire context menu object .. so that means I have to create multiple context menus for every toolbar item I want to expand ... isn't there a way to only pass the submenu id of the context menu without passing the entire context menu object itself ?

Thanks