How do I set a context menu around a whole object

Question

See if you look at the image, I can only right click and get a context menu when I click in the orange area. I want to be able to right click and get a context menu when I click around the whole object (like in the progress bar and etc). All those items in the orange are displayed using a List View, I am using Hbox to organize them so checkbox and progress bar can be on the some line. I tried this answer Javafx ListView ContextMenu but it didn't really help.

Here's my code

// Declare list that will hold the item
    ObservableList<HBox> itemList = FXCollections.observableArrayList();
    // Declare List View that will contain all the items
    ListView itemlistView = new ListView<>();
    // Get the items within the week
    VBitem.displayByWeek();
    // Add the items to the item list
    for (int i = 0; i < VBitem.weekList.size(); i++) {
        itemList.add(VBitem.weekList.get(i).display());
    }
    // Add the items to the list view
    itemlistView.setitems(itemList);
    // Style the list
    itemlistView.getStylesheets().add(getClass().getResource("Main.css").toExternalForm());
    // Add the list view to the scroll pane
    fx_content_scroll.setContent(itemlistView);

    itemlistView.setCellFactory(ly -> {
        ListCell<HBox> cell = new ListCell<>();
        ContextMenu contextMenu = new ContextMenu();
        // Menu items
        Menuitem editMenu = new Menuitem("Edit");
        Menuitem deleteMenu = new Menuitem("Delete");



        //System.out.println("Cell " + cell.getitem().item.info());
        editMenu.textProperty().bind(Bindings.format("Edit \"%s\"",cell.itemProperty()));
        //edititem.textProperty().bind(Bindings.format("Edit \"%s\"", cell.itemProperty()));
        //editMenu.textProperty().bind(cell.itemProperty().asString());
        editMenu.setOnAction(event -> {
            System.out.println("HI "+cell.itemProperty());
            //System.out.println("Just edited "+cell.getitem().item.info());
            System.out.println("Editing");
        });
        // Add menu items to ContextMenu
        contextMenu.getitems().addAll(editMenu, deleteMenu);



        cell.emptyProperty().addListener((obs, wasEmpty, isNowEmpty) -> {
            if (isNowEmpty) {
                cell.setContextMenu(null);
            } else {
                cell.setContextMenu(contextMenu);
            }
        });

        return cell;

    });

Answer 1

From my understanding, you want to show a ContextMenu anywhere within the Pane that contains the CheckBox and the ProgressBar. Adding a ContextMenu to a Control is straight forward; you use the Control.setContextMenu(...); method, however, an HBox is a Pane, not a control.

To add a ContextMenu to a HBox, you can use the Node.setOnContextMenuRequested(...) method to receive an event when the ContextMenu is requested. During which you can show the context menu at the event location, giving the desired effect.

    HBox box = new HBox();
    box.getChildren().addAll(...);        

    MenuItem editMenu = new MenuItem("Edit");
    editMenu.setOnAction(e -> {
        // Do something
    });

    MenuItem deleteMenu = new MenuItem("Delete");
    deleteMenu.setOnAction(e -> {
        // Do something
    });

    ContextMenu menu = new ContextMenu(editMenu, deleteMenu);
    box.setOnContextMenuRequested(e -> {
        menu.show(box.getScene().getWindow(), e.getScreenX(), e.getScreenY());
    });

This will open a ContextMenu anywhere within the HBox you used to organize the CheckBox and the ProgressBar. This can easily be adjusted to fit to your desired area.