ContextMenu component

tullio0106 · January 6, 2014, 12:06pm

I migrated from 4.2.to 4.4.0 and I saw the look & feel of the component changed deeply : now the tex is not side by side with the icon but below it and the backgroud is deep grey.
Is it normal ?
There’s a way to reset to the previous L&F ?
Tks
Tullio

Yorgos · January 18, 2014, 6:39pm

I found ContextMenu realy usefull and I use it in my App
Thank you for this component.

I have one question:
How could we know programmatically if ContextMenu is open or closed?

cheers
Yorgos

Ravi32 · February 12, 2014, 2:39pm

Hi All,
I am trying to use this addon version 4.4.0 with vaadin 7.1.8 and i cant get it working ? Am I missing anything in the following code :

projectTable = new Table();
        projectTable.setSelectable(true);
        projectTable.setColumnCollapsingAllowed(true);
        final BeanContainer<String, Project> projects =
new BeanContainer<String, Project>(Project.class);
        projects.setBeanIdProperty("id");
        Object cols = null;
        String colHeaders = null;
        for (Project pr : ProjectFactory.getStaticProjects()) {
            projects.addBean(pr);
            cols = pr.getVisibleColumns();
            colHeaders = pr.getColumnHeaders();
        }
        projectTable.setContainerDataSource(projects);
        projectTable.setVisibleColumns(cols);
        projectTable.setSizeFull();
        projectTable.setImmediate(true);
        projectTable.setColumnHeaderMode(ColumnHeaderMode.EXPLICIT);
        projectTable.setColumnHeaders(colHeaders);
        conMenu = new ContextMenu();
        
        conMenu.addItem("New").addItem("Project");
        conMenu.addItem("Import Metadata");
        conMenu.setAsContextMenuOf(projectTable);
        conMenu.setOpenAutomatically(false);
        
        
        projectTable
                .addItemClickListener(new ItemClickEvent.ItemClickListener() {

                    private static final long serialVersionUID = 1L;

                    @Override
                    public void itemClick(ItemClickEvent event) {
                        if (event.getButton() == MouseEventDetails.MouseButton.RIGHT) {
                            System.out.println("right button clicked.");
                            
                             conMenu.open(event.getClientX(), event.getClientY());

                             
                        }

                    }
                });

Regards
Ravi

Yorgos · February 24, 2014, 8:09pm

OK
I found .open and .addContextMenuCloseListener
and so I can track of menu’s situation

Bohdan3 · February 28, 2014, 8:21am

is there any way to make it work with FilterTable addon?

Yorgos · March 5, 2014, 4:15pm

Hello ContextMenu

I would like to enable / disable context menu (depending on a situation), so that when I disable it (remove it completely) the browsers native context menu to appear on right click instead of Vaadin’s context menu.

    public void setEnableContextMenu (boolean b)
    {
        if (b)
        {
                m_contextMenu = new ContextMenuWords (this); //Create of context menu
                m_contextMenu.setAsContextMenuOf (this); //attach it to component
                m_contextMenu.setOpenAutomatically (false);
            
                addLayoutClickListener (m_layoutClickListener); //get the event to open it
        }
        else
        {
            if (m_contextMenu != null)
            {
                removeLayoutClickListener (m_layoutClickListener);
                m_contextMenu.remove();
            }
            m_contextMenu = null;
        }
    }

the code above removes the context menu but the browsers native context menu does not appear when I right click my component.
what am I missing from the above code in order to remove context menu completely so for broser’s context menu to be anabled again??

cheers
Yorgos

Emmanuel10 · March 6, 2014, 7:48am

Yes, there is. You have to add an ItemClickListener to your FilterTable like this:

        this.addItemClickListener(new ItemClickEvent.ItemClickListener() {
            @Override
            public void itemClick(ItemClickEvent event) {
                if (event.getButton() == MouseButton.RIGHT) {
                    if (contextMenuBuilder != null) {
                        ContextMenuOpenedOnFilterTableRowEvent contextMenuEvent =
                                new ContextMenuOpenedOnFilterTableRowEvent(contextMenu, FilterTable.this, event
                                        .getItemId(), event.getPropertyId());
                        contextMenuBuilder.onRow(contextMenuEvent);
                        selectContextMenuItem(contextMenuEvent);
                        contextMenu.open(event.getClientX(), event.getClientY());
                    }
                }
            }
        });

You will have to define several classes: FilterTableContextMenuBuilder and ContextMenuOpenedOnFilterTableRowEvent but that should be pretty straight forward.

Lee15 · March 18, 2014, 12:03pm

First - thanks!

This is a great component. It fills a HUGE hole in the vaadin core framework as far as I am concerned.

Now for some issues I would like to report (I am using Context Menu 4.4.0, with Vaadin 7.1.11, running primarily on Chrome).

Keyboard navigation - if you move (using up or down arrows) into a disabled item, you cannot move out of it using the keys.
Keyboard navigation - if you do not initially move the icon over the content menu popup to highlight an item, then it does not accept keyboard events. In fact, the keyboard events run on the component underneath! This causes us problems, as a user can select different rows in our underlying table (for which the context menu is attached to), and the context sensitive items in our menu therefore become out of sync with what is actually selected in the table. I think if the context menu is on display, it should be the component with focus, and accept all keyboard events.
Keyboard traversal - I would like to use the left and right keys to enter/leave sub-menus, but this doesnt appear to work. In fact, I cannot work out how to enter sub-menus.
It would be good if the main vaadin themes were supported. This looks a bit out of place in the Chameleon theme (which is what we use).

Many thanks, and keep up the great work!

Lee.

Yary · April 10, 2014, 3:29pm

Hi ContextMenu maintainer,

is there any complete basic example to start with this addon? With the examples in the home page I am not able to display a contextMenu.

Thank you,

Yary

Milan11 · April 21, 2014, 6:36pm

Hello I don’t know if this may be bug or I am doing something wrong. But calling method hide() doesn’t actually hide conext menu. Context menu still stays open (context menu was attached to table)… Any solutions?

Thank you.

Lee15 · May 23, 2014, 1:12pm

This doesnt seem like an actively maintained add-on any more, but just in case you do come back to it, here is one little subtle ‘funny’.

Every time you open a context menu on the same component, it grows by 1px in width. Keep closing & opening, and you can find yourself with a very wide menu…

(Context menu 4.4.0, Vaadin 7.1.15, Chrome & Firefox)

Deleted409 · May 24, 2014, 3:32am

the css of context menu can’t be applied!
compiled css of my theme:
.mytheme .v-context-menu {…}

but the menu items in the DOM of my page tree lies outside the .mytheme block!
Would anyone tell me how to fix it?
(context menu 4.4.0,vaadin 7.2.0)

edited1:
seems that the same problem with the following thread.
https://vaadin.com/forum/#!/thread/5018595

Alexander199 · August 6, 2014, 12:40pm

Hi Oliver
I’m experiencing the same issue, have you found the solution ?

I’m running vaadin UI in embedded mode if it matters …

Thanks

Philipp31 · August 14, 2014, 2:11pm

Hello at all,

I have another problemwith that AddOn. It works quite nice, but sometimes (depends waht element I extend for my contextmenu or which browser I use) I have the problem that my context menu is opened and the contextmenu of the browser, which hides the most of my contextmenu.
Does anyone has an idea waht the problem is? Or can I disable the browser context menu in generall?

Thanks

Deleted434 · August 16, 2014, 10:27pm

And I have the same situation.

But my context menu does not show a menu background, and have a weird view.

Alexander199 · August 19, 2014, 8:31pm

You should include contextmenu theme styles to fix the background issue

Thomas250 · September 11, 2014, 9:51am

Hello all,

I’m trying to bind the ContextMenu to a Polygon which was drawn in the V-Leaflet extensions Draw plugin. I have already a ContextMenu on the leaflet map pane and that works. It’s not appearing on the Polygon, which indeed should be the case. However the ContextMenu is not showing, while LPolygon implements Component. Is this because the click event in the javascript side of leaflet is not connected to the server side?

Abiola1 · September 11, 2014, 9:41pm

Need help with showing a context menu on button click. The code below does not display the menu as I expected, however I see the System.out.print (“Button clicked”) message. Am using Eclipse. Do I need to compile client side widgets?

myButton = new Button(“Button”);
myButton.addClickListener( new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
System.out.println(“Button clicked”);
ContextMenu cm= new ContextMenu();
ContextMenu.ContextMenuItem abc = cm.addItem(“MenuItem1”);
cm.setAsContextMenuOf(myButton);
cm.open(event.getClientX(),event.getClientY());
}
});

Lee15 · September 19, 2014, 11:04am

Hi.

Any chance of supporting the new Valo theme by default? Component now sticks out like a sore thumb, and I dont want to manually edit the final CSS for Context Menu every time I compile my projects SASS.

Cheers,
Lee.

tullio0106 · September 22, 2014, 4:42pm

I’ve the backgroud problem with 4.5 : I don’t see any background and all captions overlaps (second level overlaps with the first ans so on).
Could someone suggest how solve such issues ?
Is there any way to influence or better manage the graphic of the component ?
Tks