Vaadin-Context Menu

Dividers in Vaadin-Context Menu

A Context menu divider can be applied to display horizontal bars between menu items. It is similar to borders and can be used to separate and group related items. Dividers should be used sparingly to prevent creating unwanted visual clutter.

Right-click on the mouse or long-press a Grid row to view the dividers in Context Menu.

Java Snippet

The below given Java Snippet will display the dividers in the context menu on right-clicking any component of the grid row.

    Grid<Person> g = new Grid();
    g.setAllRowsVisible(true);
    g.setItems(people);

    g.addColumn(person -> person.getName())
        .setHeader("Name");
    g.addColumn(person -> person.getEmail())
        .setHeader("Email");
    g.addColumn(person -> person.getAddress().getPhone())
        .setHeader("Phone number");
    GridContextMenu<Person> contextmenu = grid.addContextMenu();
    contextmenu.addItem("View", event -> {});
    contextmenu.add(new Hr());
    contextmenu.addItem("Edit", event -> {});
    contextmenu.addItem("Delete", event -> {});
    context menu.add(new Hr());
    contextmenu.addItem("Email", event -> {});
    contextmenu.addItem("Call", event -> {});

    add(g);

Output

Checkable Menu Items in Vaadin-Context Menu

Checkable menu items in Vaadin-Context Menu can be used as an interface to enable and disable settings. When a checkable item is chosen, the system invokes your item-selected callback method.

Java Snippet

The below given Java Snippet will allow you to change the name from checkable context menu items.

package com.vaadin.demo.component.contextmenu;


import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.contextmenu.ContextMenu;
import com.vaadin.flow.component.contextmenu.MenuItem;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.router.Route;
import java.util.List;

@Route("context-menu-checkable")
public class ContextMenuCheckable extends Div
 {
  private final ContextMenu conmenu;
  private final Span assignee;

  public ContextMenuCheckable() 
  {
    assignee = new Span();
    conmenu = new ContextMenu();
    conmenu.setTarget(assignee);

    List<Person> people = DataService.getPeople(5);
    for (Person person: people) {
      MenuItem  item = conmenu.addItem(person.getName(), event -> {
        setAssignee(person);
      });
      item.setCheckable(true);
    }

    setAssignee(people.get(0));

    Div assigneeInfo = new Div(new Span("Assignee: "), assignee);
    assignee.getStyle().set("font-weight", "bold");

    add(assigneeInfo);
  }

  private void setAssignee(Person person)
   {
    // Update checked state of menu items
   conmenu.getItems().forEach(item -> item.setChecked(item.getText().equals(person.getName())) ); 
   assignee.setText(person.getName());
  }
}

Output

Hierarchical Menu in Vaadin-Context Menu

Menu Bar can include multiple levels of sub-menus. A hierarchical menu in Vaadin-Context Menu can be used to arrange a vast set of options and group-related things. Right-click on the mouse or long-press on a Grid row to bring up the hierarchical menu in Context Menu.

Java Snippet

The below given Java snippet will display the Hierarchical Menu in Vaadin-Context Menu.

    Grid<File> g = new Grid();
    g.setAllRowsVisible(true);
    grid.setItems(getFiles());

    g.addColumn(File::getName)
        .setHeader("Report");
    g.addColumn(File::getDisplaySize)
        .setHeader("Size");

    GridContextMenu<File> contextmenu = g.addContextMenu();
   
    contextmenu.addItem("Preview", event -> {});
    contextmenu.addItem("Edit", event -> {});
    contextmenu.add(new Hr());
    
    GridMenuItem<File> export = contextmenu.addItem("Export");
    GridSubMenu<File> exportSubMenu = export.getSubMenu();
    exportSubMenu.addItem("Portable Document Format (.pdf)", event -> {});
    exportSubMenu.addItem("Rich Text Format (.rtf)", event -> {});
    exportSubMenu.addItem("Plain text (.txt)", event -> {});

    GridMenuItem<File> share = menu.addItem("Share");
    GridSubMenu<File> shareSubMenu = share.getSubMenu();
    shareSubMenu.addItem("Copy link", event -> {});
    shareSubMenu.addItem("Email", event -> {});
    contextmenu.add(new Hr());
    contextmenu.addItem("Delete", event -> {});
    
    add(g);

Output

Disable Menu Items in Vaadin-Context Menu

Menu items in Vaadin-Context Menu can be disabled to indicate that they are unavailable. Right-click on the mouse or long-press on a Grid row to check for disabled menu items in Context Menu.

Java Snippet

The below given Java snippet will disable menu items in Vaadin-Context Menu.

 Grid<File> g = new Grid();
    g.setAllRowsVisible(true);
    g.setItems(getFiles());

    g.addColumn(File::getName)
        .setHeader("Report");
    g.addColumn(File::getDisplaySize)
        .setHeader("Size");

    GridContextMenu<File> contextmenu = grid.addContextMenu();
    contextmenu.addItem("Preview", event -> {});
    cpntextmenu.addItem("Edit", event -> {});
    contextmenu.add(new Hr());

    GridMenuItem<File> export = contextmenu.addItem("Export");
    GridSubMenu<File> exportSubMenu = export.getSubMenu();
    GridMenuItem<File> exportPDF = exportSubMenu.addItem("Portable Document Format (.pdf)", event -> {});
    exportPDF.setEnabled(false);
    exportSubMenu.addItem("Rich Text Format (.rtf)", event -> {});
    exportSubMenu.addItem("Plain text (.txt)", event -> {});

    GridMenuItem<File> share = contextmenu.addItem("Share");
    GridSubMenu<File> shareSubMenu = share.getSubMenu();
    shareSubMenu.addItem("Copy link", event -> {});
    shareSubMenu.addItem("Email", event -> {});
    menu.add(new Hr());

    GridMenuItem<File> delete = contextmenu.addItem("Delete", event -> {});
    delete.setEnabled(false);

    add(g);

Output

Left Click to Open Vaadin-Context Menu

In cases where the left-click has no other use, such as a Grid without selection support, you can use it to access the Vaadin-Context Menu.

Java Snippet

The below given Java snippet will allow opening the Vaadin-Context Menu by left click.

Grid<Person> g = new Grid();
    g.setAllRowsVisible(true);
    g.setItems(people);

    g.addColumn(person -> person.getName())
        .setHeader("Name");
    g.addColumn(person -> person.getEmail())
        .setHeader("Email");
    g.addColumn(person -> person.getAddress().getPhone())
        .setHeader("Phone number");

   GridContextMenu<Person> contextmenu = grid.addContextMenu();
   contextmenu.setOpenOnClick(true);
   contextmenu.addItem("View", event -> {});
   contextmenu.addItem("Edit", event -> {});
   contextmenu.addItem("Delete", event -> {});
   
   add(g);

Output

Menu Bar in Vaadin-Context Menu

The menu bar is a component of a vaadin-context menu, which contains drop-down menus that let the user interact with the content or application in a variety of ways. It is used when there is a dedicated element for opening an overlay menu.

Java Snippet

The below given Java snippet will add the menu bar column in Vaadin-Context Menu.

grid.addComponentColumn(file -> {
  MenuBar mB = new MenuBar();
  mB.addThemeVariants(MenuBarVariant.LUMO_TERTIARY);
  MenuItem mI = mB.addItem("•••");
  mI.getElement().setAttribute("aria-label", "More options");
  SubMenu subMenu = mI.getSubMenu();
  subMenu.addItem("Preview", event -> {});
  subMenu.addItem("Edit", event -> {});
  subMenu.addItem("Delete", event -> {});
  return mB;
})
  .setWidth("70px")
  .setFlexGrow(0);


GridContextMenu<File> contextmenu = grid.addContextMenu();
contextmenu.addItem("Preview", event -> {});
contextmenu.addItem("Edit", event -> {});
contextmenu.addItem("Delete", event -> {});

Output

Frequently Asked Questions

Can I use Vaadin to create desktop applications?

Yes. By default, all Vaadin applications are PWAs, which means they can be installed on desktop devices with supported browsers. When installed, they continue to function as web apps and automatically update, saving you the trouble of supporting several versions of the app in the wild. Apps built with Vaadin can also be found on the Windows Store.

Is Vaadin capable of handling huge applications?

Yes. Many of our clients have created apps with hundreds of views. The client JavaScript size is not dependent on the app size when using the server-side Flow framework. Therefore a 100-view application loads just as quickly as a single-view application.

Is it possible to construct mobile apps with Vaadin?

Yes. All Vaadin components are mobile-first. They adjust to different viewport widths and provide the best touch screen experience. Because all Vaadin apps are PWAs by default, your users can install them on their Android and iOS devices for easy access. Vaadin PWAs can also be found on the Android Play store.

Conclusion

Congratulations on finishing the blog! We have discussed the Vaadin-Context Menu. We further looked at the dividers, checkable menu items, hierarchical menu, disabling menu items, menu bar, and left click to open Vaadin-Context Menu.

We hope this blog increased your knowledge regarding the Vaadin-Context Menu. We recommend you to visit our articles on different topics of Vaadin, such as

• Vaadin-Environment Setup
• Vaadin-Grid
• Vaadin Architecture
• Vaadin-Confirm Dialog
• Vaadin-Combo Box
   

Please refer to our guided pathways on Code studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses, and use the accessible sample exams and questions as a guide. For placement preparations, look at the interview experiences and interview package.

Please do upvote our blogs if you find them helpful and informative!

Happy learning!