ContextMenu component

Vaadin 6 / 7 / 8 Framework UI
123

Hi,
I migrated project to maven from ant. So i had to upgrade contextMenu to 4.5 from 4.1.3. After upgrade, style issues appeared. I looked at previous project’s resources from browser and saw
style.css
style.css (begins with @import url(…/reindeer/legacy-styles.css));
contextmenu.css
legacy-styles.css

When i look new project’s resource, only
style.css
style.css , files are loaded.

i added manually contextmenu.css and legacy-styles.css to my project and style issues are solved. But another problem appeared. Problem is contextmenu never close. After right click context menu opens perfectly but previous menus don’t close.

What should i do to solve this problem

Thanks…

124

I am using Vaadin 7.3.5 and ContextMenu 4.5,

I attached the ContextMenu to an Image (tried other components too) that is inside an inner window, and the popup doesn’t show.
Already tried in components outside the window, it works fine.

Is this a bug?

125

Cool addon, but submenus are opened in wrong position when the page is scrolled. You should take into account the scrolled pixels when you calculate the top position in the client side of the addon

126

The maven dependency for 4.6 is not right.

127

Just to note that im having same issue as Joao Eduardo Galli, context menu doest show if used in sub-window.
Also css is messed up with vaadin 7.4 and valo theme.

Hope this get’s resovled soon.

128

I found a solution for my problem. I opened the context menu via
ContextMenue.open( x, y )
, whereat x and y are the actual coodinates of the mouse cursor. If I manipulate the coordinates a little bit in that way
ContextMenue.open( x+1, y+1 )
 everything works as it should and the end user does not see the “missplaced” contextmenu.
But why it works I have really no idea.

129

I’m using Vaadin 7.4.7 with ContextMenu 4.5

I’m basically trying to get the selected ContextMenuItem but I always come up with null. Here is my code:

        ContextMenu contextMenu = new ContextMenu();
        contextMenu.setAsContextMenuOf(layout);
        
        contextMenu.addItem("item1");
        contextMenu.addItem("item2");
        
        contextMenu.addItemClickListener(new ContextMenuItemClickListener()
        {
            @Override
            public void contextMenuItemClicked(ContextMenuItemClickEvent event)
            {
                ContextMenu.ContextMenuItem clickedItem = (ContextMenu.ContextMenuItem)event.getSource();
                System.out.println("Clicked Item: " + clickedItem.getData());
            }
        });

I'm basically trying to get the ContextMenuItem so that I can add an icon when it's clicked, as well as know which menu item was clicked.

Any suggestions on how to get the clicked ContextMenuItem would be appreciated.
130

Hi Stephan,

you need to add some data with the setData(Object data) method for each of your contextMenuItems.

So change

contextMenu.addItem("item1"); contextMenu.addItem("item2"); to something like:

        ContextMenuItem item1 = contextMenu.addItem("item1");
         item1.setData("some_item1_data");
        ContextMenuItem item2 = contextMenu.addItem("item2");
         item2.setData("some_item2_data");

As set- and getData expects the Java type object, you can optionally even write your own class for it instead of passing Strings.

Sample:

public class ContextMenuData {
    private String ACTION;
    private String id;
    private Object obj;
    
    public String getACTION() {
        return ACTION;
    }

    public void setACTION(String aCTION) {
        ACTION = aCTION;
    }

    public Object getObj() {
        return obj;
    }

    public void setObj(Object obj) {
        this.obj = obj;
    }

}

and then pass it with:

 ContextMenuItem newentry = contextmenu.addItem("New entry", FontAwesome.TABLE);
                    ContextMenuData cmd_new = new ContextMenuData();
                    cmd_new.setACTION("NEW");
                    newentry.setData(cmd_new);
                    newentry.addStyleName("contextmenu");
131

Any chance you could make this support Grid?

Grid doesn’t support context menu or Actions, unlike Table

https://dev.vaadin.com/ticket/16858
https://dev.vaadin.com/ticket/16855

Thanks.

132

Hi Aydin,

Thank you, that worked perfectly! Great plugin!

133

Thanks Aydin and Peter, It works perfectly

134

Does ContextMenu support checkboxes?

I can’t see anything obvious.

Thanks.

135

Hi,

we have just added ContextMenu to our project and observe strange behavior.

We have a multi-level menu, and all levels behave ok, with the exception that nested menu items drift more and more to the right with every new menu invocation.

If we open the page source in Firefox Inspector, we see something like this:

<div [color=#FF0000]
style="width: 117px;"
[/color] tabindex="0" class="v-context-menu-item-basic-submenu v-context-submenu">
  ...
</div>

‘div’ elements that represent menu items have an explicit style/width attribute, and numeric value of this attribute grows with every invocation…

Our component verions are 7.4.2 for Vaadin and 4.5.0 for ContextMenu.

Menu is being used closely to available examples:

LazyEntityTable<Transaction> transactionTable;
ContextMenu menu = new ContextMenu();
ContextMenuItem submenu = menu.addItem("... submenu label...");
submenu.addItem("... submenu item label...");
menu.setOpenAutomatically(true);
menu.setAsTableContextMenu(transactionTable);
transactionTable.addItemClickListener(new ItemClickEvent.ItemClickListener() {
    @Override
    public void itemClick(ItemClickEvent event) {
        if (event.getButton() == MouseButton.RIGHT) {
            menu.open(event.getClientX(), event.getClientY());
        }
    }
});

What may be wrong? Is there anything else to be mentioned?

Thank you in advance for any comments…

136

Hi,

Why ContextMenu listeners (ContextMenuItemClickListener, ContextMenuClosedListener…) does not implements
Serializable
interface?

Thanks,
Dmitry

137

You should use the official
Vaadin ContextMenu Add-On
 for that purpose. The downside is that it requires Vaadin 7.6+ but it does work with Grid. There’s an example in their demo. The upside is that said add-on is likely to become part of Vaadin core at some point.

138

It’s not showing the menu in Vaadin 7.6.4, contextmenu 4.5. Events are firing correctly.

I’ve tried it on a Tree and a TreeTable, in the latest versions of Chrome, Firefox and IE on Windows.

If noone is going to support this anymore, it should be archived. That way the rest of us don’t lose time.

139

Scott, I appreciate your frustration but I’m guessing that this add-on has done an excellent job for many, many years. However, nowadays, and with Vaadin 7.6+, I would look to the semi-official
Vaadin ContextMenu Add-On
 as an alternative.

140

Ah, thanks, I thought I had seen that in my search, but got confused and tried this one instead.

141

Hi,
I have a problem with the context menu. I’m using Vaadin 6 and ContextMenu 3.1.
I’d like that people who use my application can change the background color.
I have defined a default color in the style file as a variable :

:root {
    --main-color:#0082bf;
}
.blue {
    --main-color:#0082bf;
}
.pink {
    --main-color:#804463;
}
.green {
    --main-color:#638044;
}
.v-generated-body, .v-app, .v-view,
.v-window .v-window-contents {
    background-color: var(--main-color);
}
.v-ctxmenu {
     background-color: var(--main-color);       
}

I create MyContextMenu to define the style :

[code]
public class MyContextMenu extends ContextMenu {

private static final long serialVersionUID = 1L;

public MyContextMenu() {
    super();
    addStyleName(application.getMainWindow().getStyleName());
}

}
[/code]But when it open a submenu, the background is in my default color and not in the color define by the stylename.

How doing this?

Julie

PS : sorry for my english
27712.png

142

I implemented ContextMenu in my application and it works fine, except it does not hide at times as it should, allowing the user to produce errors, like deleted the same row twice and the app gets a null pointer error. Could you please help with an indication as to get it to hide properly ?