How to open contextmenu to open left justified to click

[Ian]

We have a context menu on an icon at the right of a grid. When we open a context menu, it initially opens with much of the menu hidden off the edge of the screen (see first attached image). If I open it again, the open position shifts so the whole menu is visible.

Ideally, what we would like is when the context menu opens, it is rendered so the right edge of the menu is aligned with the mouse cursor position rather than the left (don't really care if the menu text is left or right justified) (see second attached image)

I tried wrapping the context menu with a div which include the k-rtl class, but this made no difference.

Is this possible?

Currently using tagHelpers with UI for ASP.NET Core 2022.3.1109.

[Alexander]

Hi Ian,

Thank you for reaching out and for taking the time to share the relevant screenshots that further depict the sporadic behavior on your end, it is greatly appreciated.

Based on the provided screenshot alone, it is hard to determine the exact cause of the behavior. In this regard, could you please consider sharing additional details regarding the current scenario that is held at hand? For example, a code snippet illustrating the ContextMenu configuration alongside the Grid's would be beneficial for the case, as it will give me a better overall understanding of the currently configured implementation on your premises.

Regardless, I tried reproducing the encountered behavior in an isolated environment but was unable to do so due to the fact that the ContextMenu's items overflow within the existing viewport, by design, the items will be aligned on the left-hand side:

Nevertheless, a possible recommendation would be to explicitly set the direction programmatically by:

• Subscribing to the open event of the ContextMenu TagHelper:
  

<kendo-contextmenu name="menu" target="#grid" filter=".k-master-row > td" on-open="onOpen">
...
</kendo-contextmenu>

• Within the handler, set the direction of the ContextMenu by using the .setOptions() client-side method
  

<script>
  function onOpen(e){
      e.sender.setOptions({"direction":"left"});
  }        
</script>

That being said, I am also attaching the application used for testing purposes. If this does not help, could you please consider reproducing the behavior within the sample and send it back for further examination?

Looking forward to hearing back from you.

Kind Regards,
Alexander
Progress Telerik