ContextMenu component

Vaadin 6 / 7 / 8 Framework UI
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 ?

143

The idea of Henri sounds very good indeed. I conducted a requested feature in version 2.1 and is now available. I also checked to make sure it will fit on the menu screen. If it does not, it will be open from the left click. It also works with submenus.

144

There is an issue when we need to show the context menu conditionally.
For an example, Lets assume that there are two types of rows in a table and based on a custom logic, we decide whether context menus should be shown or not.

If logic decides not to show the context menu, currently there is no way to hide it. Even if we remove all items, still there is a small box appearing

Please have a look, below is the code

ContextMenu.ContextMenuOpenedListener openedListener = new ContextMenu.ContextMenuOpenedListener.TableListener() {

@Override
public void onContextMenuOpenFromRow(ContextMenu.ContextMenuOpenedOnTableRowEvent contextMenuOpenedOnTableRowEvent) {
contextMenu.removeAllItems();
if (<custom logic>) {
contextMenu.addItem("Field permissions").addItemClickListener(e -> {
/// Perform the action
});
}else{
/// Here context menu should not be shown
}

}

@Override
public void onContextMenuOpenFromHeader(ContextMenu.ContextMenuOpenedOnTableHeaderEvent contextMenuOpenedOnTableHeaderEvent) {

}

@Override
public void onContextMenuOpenFromFooter(ContextMenu.ContextMenuOpenedOnTableFooterEvent contextMenuOpenedOnTableFooterEvent) {

}
};

contextMenu = new ContextMenu();
contextMenu.setAsContextMenuOf(privilegeTree);
contextMenu.setOpenAutomatically(false);
contextMenu.addContextMenuTableListener((ContextMenu.ContextMenuOpenedListener.TableListener) openedListener);
145

Hi,
I’m not able to make Context Menu work with a Grid in Vaadin 8; I used the example found on Directory add-on;
this is an extract; what’s wrong with this?

TIA
Danilo

public class MyGrid extends Grid<MyClass> {
public MyGrid() {

   setSizeFull();

   addColumn(MyClass::getId)
      .setCaption("Id")
      .setWidth(60);

   addColumn(..);

// Context Menù
// Create a context menu for 'someComponent'
   ContextMenu contextMenu = new ContextMenu(this, true);

   MenuItem item = contextMenu.addItem("Start ", e -> {
     Notification.show("Start ");
   });

   MenuItem item2 = contextMenu.addItem("Stop", e -> {
     Notification.show("Stop");
   });
...
146

Hi,

This component was integrated as part of the framework some time ago, but the docs are still scarce.

My problem is that the component doesn’t seem to have any collision when it doesn’t have enough space to fit in.
For instance, use it in a Grid which grows until the bottom of the screen – if you have 4 or 5 items, luckily you’ll be able to click on 1st and maybe 2nd of them…

Does anyone has a suggestion on how to overcome this?

147

Hi I’m having a problem with the context menu. I’ve been using this component for quite a while now in my jee projects. It gives me an error everytime I right click(while on debug of course).

The widget set has been put together well, see below.

  1. Error itself - see attachment

  2. Code implementation.
    Tab tab = super.tabSheet.addTab(c, selected);
    tab.setClosable(true);// ensure it’s closeable, allow someone to work on multiple documents

             ContextMenu tabMenu = new ContextMenu(tabSheet, true);

         //TODO: context menu not working - fix it- RPC calls a bit problematic.
         tabMenu.addContextMenuOpenListener(menu -> {
             tabMenu.removeItems();
             tabMenu.addItem("Close", e -> {});
             tabMenu.addItem("Close Others", e -> {});
             tabMenu.addItem("Close All", e -> {});
             tabMenu.open(menu.getX(), menu.getY());
         });

  3. Maven widget set build rules

    com.vaadin
    vaadin-maven-plugin
    ${vaadin.plugin.version}

    -Xmx2048M -Xss1024M
    ${basedir}/src/main/webapp/VAADIN/widgetsets
    ${basedir}/src/main/webapp/VAADIN/widgetsets
    true
    ${basedir}/target/tmp/gwt-unitCache
    true
    true
    http://localhost:8080/








    resources
    update-widgetset
    compile



  4. ApplicationWidgetset.gwt.xml

    <?xml version="1.0" encoding="UTF-8"?> 
<!--
 Uncomment the following to compile the widgetset for one browser only.

 Multiple browsers can be specified as a comma separated list. The
 supported user agents at the moment of writing were:
 ie8,ie9,gecko1_8,safari,opera

 The value gecko1_8 is used for Firefox and safari is used for webkit
 based browsers including Google Chrome.
-->
<!-- <set-property name="user.agent" value="safari"/> -->

<!--
 To enable SuperDevMode, uncomment this line.

 See https://vaadin.com/wiki/-/wiki/Main/Using%20SuperDevMode for more
 information and instructions.
-->
<!-- <set-configuration-property name="devModeRedirectEnabled" value="true" /> -->
<inherits name="com.vaadin.contextmenu.WidgetSet" />
<inherits name="org.vaadin.addons.searchbox.Widgetset" />
<inherits name="org.vaadin.addons.autocomplete.Widgetset" />
<inherits name="org.vaadin.addons.md_stepper.WidgetSet" />
<inherits name="org.vaadin.peter.contextmenu.ContextmenuWidgetset" />
<inherits name="org.vaadin.gridutil.WidgetSet" />

Kindly assist.

With thanks, Sam.

17214007.jpg