CODEWITHSUNDEEP
angularkendo-uikendo-ui-angular2
ps0604
ps0604

Reputation: 1071

Opening Kendo UI for Angular menu upwards instead of downwards

In this StackBlitz I have a Kendo UI for Angular context menu. When the user right-clicks the menu list is opened downwards as any regular menu.

What I need is to open the menu list upwards instead of downwards. This is what I'm trying to achieve, forcing the menu always to go up:

enter image description here

Is this possible? I couldn't find any options in the API.

Upvotes: 0

Views: 1044

Answers (1)

Dipen Shah
Dipen Shah

Reputation: 26075

You can take control in to your hands and specify position on which to open context menu.

First, remove target attribute from context menu item, instead listen to contextmenu event on the target.

Secondly, when event handler for contextmenu event is fired, call show method in the API and assign correct offset you want to use. Most likely calculating this position based on expected height of the menu will be the trickiest part.

Lastly, prevent default context menu of the browser.

onRightMouseClick(event: MouseEvent) {
  const posX = this.contextMenuTarget.nativeElement.getBoundingClientRect().left;
  const posY = this.contextMenuTarget.nativeElement.getBoundingClientRect().top - 85;
  this.contextMenu.show({
    left: posX,
    top: posY
  });

  event.preventDefault();
}
<div #target class="target" (contextmenu)="onRightMouseClick($event)">
  <p class="placeholder">Right-click to open Context menu</p>
</div>
<kendo-contextmenu [items]="items" clss="menu"> </kendo-contextmenu>

Take a look at the demo here.

Upvotes: 1

Related Questions