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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Changing direction of ejMenu

Thread ID:

Created:

Updated:

Platform:

Replies:

131655 Jul 21,2017 10:09 AM UTC Aug 8,2017 10:40 AM UTC Angular 3
loading
Tags: ejMenu
Me
Asked On July 21, 2017 10:09 AM UTC

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 [Syncfusion]
Replied On 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. 


Agne
Replied On 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)):



Keerthana Rajendran [Syncfusion]
Replied On 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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;