Changing direction of ejMenu

[Me]

Hello,

There is nothing about this question in API, so maybe you can help me: How can I change direction of ejMenu?
I need to open it upwards, not downwards as it's not fitting to my bottom

[Keerthana Rajendran]

Hi Me, 

 

Thank you for contacting Syncfusion support 

 

Currently we don’t have any API to set direction as “top” for menu. We have overridden _subMenuPos method of our menu source to achieve your requirement. Please refer to the below code snippet 

ej.Menu.prototype._subMenuPos= function (element, direction) { 

            var pos = $(element).offset(); 

            var subMenuLeft, subMenuRight ; 

            var posLeft = pos.left; 

            var subMenu = $('ul:first', element); 

            var menuWidth = $(element).outerWidth(); 

            if (pos == null || pos == undefined) 

                return false; 

            var submenuWidth = subMenu.outerWidth() + 1; // +1 for the space between menu and submenu 

            var left = this.model.container ? $(this.model.container).width() + $(document).scrollLeft() : document.documentElement.clientWidth + $(document).scrollLeft(); 

            if (this.model.menuType == "normalmenu") { 

                if ($(element.parentNode).is(this.element)) { 

                    if (this.model.orientation == "horizontal"){ 

                        subMenu.css("top", (($(element).outerHeight()-$(element).find("ul").outerHeight())-$(element).outerHeight()) + "px"); 

                        } 

                        …………………         

            } 

        }, 

 

 

We have prepared a sample for your reference. Kindly refer to the below given link 

 

Sample: http://www.syncfusion.com/downloads/support/forum/131655/ze/MenuSample1547841971.zip 

 

Regards, 

Keerthana. 

[Agne]

Hello,

is there a possibility to change ejMenu direction not for all menus in application but only for several of them? For example defining ej-menu using @ViewChild property (<ej-menu #MyMenu></ej-menu> ... @ViewChild('MyMenu') MyMenu: EJComponent<ej.Menu, any>)?

Also, in your example I am getting error that property _subMenuPos does not exist on type 'Menu', but the function is working and menu direction changes. So I do not know or this is a problem or it could be ignored:

This is shown when ej.Menu.prototype is printed in console (console.log(ej.Menu.prototype)):

[Keerthana Rajendran]

Hi Me,   

 

Query : is there a possibility to change ejMenu direction not for all menus in application but only for several of them? For example defining ej-menu using @ViewChild property (<ej-menu #MyMenu></ej-menu> ... @ViewChild('MyMenu') MyMenu: EJComponent<ej.Menu, any>)? 

Yes, you can change the direction for  a particular menu by overriding the _subMenuPos method only for the required menu during  mouseover event of Menu. Please refer to the below given code. 

 

<ej-menu #MyMenu  [fields.dataSource]="localdata" [fields]="localfieldsvalues" (mouseover)="onmouseover($event)"> 

 

</ej-menu> 

 

 

export class GridComponent { 

     …… 

  @ViewChild('MyMenu')  MyMenu: EJComponents<ej.Menu, any>;      

  constructor() { 

               ………………………………… 

  } 

 

   onmouseover(event) 

   { 

       this.MyMenu.widget["_subMenuPos"]= function (element, direction) { 

            var pos = $(element).offset(); 

            var subMenuLeft, subMenuRight ; 

            var posLeft = pos.left; 

            var subMenu = $('ul:first', element); 

            var menuWidth = $(element).outerWidth(); 

            if (pos == null || pos == undefined) 

                return false; 

            var submenuWidth = subMenu.outerWidth() + 1; // +1 for the space between menu and submenu 

            var left = this.model.container ? $(this.model.container).width() + $(document).scrollLeft() : document.documentElement.clientWidth + $(document).scrollLeft(); 

            if (this.model.menuType == "normalmenu") { 

                if ($(element.parentNode).is(this.element)) { 

                    if (this.model.orientation == "horizontal"){ 

                        subMenu.css("top", (($(element).outerHeight()-$(element).find("ul").outerHeight())-$(element).outerHeight()) + "px"); 

                    } 

                   ……………………………………………………… 

 

        } 

   } 

         

 

} 

 

 

 

Query : Also, in your example I am getting error that property _subMenuPos does not exist on type 'Menu', but the function is working and menu direction changes. So I do not know or this is a problem or it could be ignored. 

This error occurs when we use js method directly in ts file. To solve this , you have to  override the method as shown below. 

onmouseover(event) 

   { 

       this.MyMenu.widget["_subMenuPos"]= function (element, direction) 

{ 

……………………. 

  } 

} 

 

 

We have modified our previous sample based on this. 

 

Please download the sample from: http://www.syncfusion.com/downloads/support/forum/131655/ze/Menu139182977.zip 

 

 

Regards, 

Keerthana.