jQuery UI Widgets Forums Angular Contextmenu Open Direction

This topic contains 4 replies, has 2 voices, and was last updated by  Kavya 2 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Contextmenu Open Direction #100351

    Kavya
    Participant

    Hi,

    I am using jqxMenuComponent in the jqxTreeComponent.
    As we have huge number of nodes in the tree and scroll is visible, for the last item ContextMenu doesn’t show up/ not fully visible.
    Could you please provide an example as to how I could make the ContextMenu visible for the last nodes
    or
    change the open direction for the contextmenu.

    [mode]=”‘popup'” [autoOpenPopup]=”false”

    Thanks in advance,
    Kavya

    Contextmenu Open Direction #100380

    Martin
    Participant

    Hello Kavya,

    You can set the position of the context menu by passing ‘left’ and ‘top’ parameters to its ‘open()’ method.
    You can also take a look at this Demo for how to use it with a TreeComponent.

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

    Contextmenu Open Direction #100427

    Kavya
    Participant

    Hello Martin,

    I have set the position
    this.objCMenu.open(event.clientX + 5 + scrollLeft, event.clientY + 5 + scrollTop);

    TreeComponent is till the end of the page. The context menu opens out of the page where all the menu items are not fully visible.

    Even in the Demo shown, it opens beyond the TreeComponent and not inside the TreeComponent.
    I want the contextmenu to open within the TreeComponent.

    Thanks,
    Kavya

    Contextmenu Open Direction #100431

    Martin
    Participant

    Hello Kavya,

    I suggest you to try the following code for estimating the menu position according to the treeComponent.

    let treeRightPosition = this.myTree.elementRef.nativeElement.offsetLeft + this.myTree.width();
     let treeBottomPosition = this.myTree.elementRef.nativeElement.offsetTop + this.myTree.height();
    
     let menuRightPosition = event.clientX + this.myMenu.width();
     let menuBottomPosition = event.clientY + this.myMenu.height();
    
     let left = event.clientX;
     let top = event.clientY;
    
     if (menuRightPosition > treeRightPosition) {
         left -= (menuRightPosition - treeRightPosition);
     }
    
     if (menuBottomPosition > treeBottomPosition) {
          top -= (menuBottomPosition - treeBottomPosition);
     }
    
     this.myMenu.open(left, top);

    This should change the window position if it would open beyond the treeComponent.

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

    Contextmenu Open Direction #100454

    Kavya
    Participant

    Hi Martin,

    Thank you for the help.

    Regards,
    Kavya

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.