We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Changing direction of ejMenu

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


3 Replies

KR Keerthana Rajendran Syncfusion Team July 24, 2017 12:56 PM UTC

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 
 
 
Regards, 
Keerthana. 



AG Agne August 7, 2017 02:40 PM UTC

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)):




KR Keerthana Rajendran Syncfusion Team August 8, 2017 10:40 AM UTC

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. 
 
 
 
Regards, 
Keerthana. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon