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.
