Cancel menu deactivation

Can you please specify the use case? Currently, the context menu hides automatically when you click anywhere on the page, including inactive menu elements (e.g., the header).

I made a menu with “fake” checkboxes.

On click, I switch icon to get checked/unchecked checkbox and reload the events for the concerned resource.

To prevent the menu from closing when an item is clicked, you can add an onClick event handler to the items and stop the click event from bubbling:

const menu = new DayPilot.Menu({
  items: [
    {
      text: "Item",
      onClick: args => {
        args.originalEvent.stopPropagation();
        // ...
      }
    },
    // ...
  ]
});

Great!!!

(I tried a ‘args.preventDefault();‘ with no success!)

Thank’s a lot.

With args.originalEvent.stopPropagation() the menu does’nt refresh.

I found a solution but the menu makes a step to right?

Here is my solution:

menu = new DayPilot.Menu({
    items: [
        {
            text: 'test',
            icon: 'far fa-square',
            onClick: function (args) {
                args.originalEvent.stopPropagation();
                var isChecked = args.item.icon == 'far fa-check-square';
                args.item.icon = isChecked ? 'far fa-square' : 'far fa-check-square';
                menu.show(args.source);
            }
        }
    ],
    onShow: function(args) {
    ...
    }
});

In the latest sandbox build (2024.4.6226), there is now a new update() method available that lets you refresh the context menu content.

Also, calling args.preventDefault() in onClick handler of a menu item prevents the menu from hiding.

With this build, you can use this:

onClick: function (args) {
    args.preventDefault();
    var isChecked = args.item.icon == 'far fa-check-square';
    args.item.icon = isChecked ? 'far fa-square' : 'far fa-check-square';
    menu.update();
}

Thanks for your answer!

Finally, I will use DayPilot.Modal.

It will be less clean but functional.