1. Home
  2. Forum
  3. Angular
  4. Adding ejMenu to ejToolbar

Adding ejMenu to ejToolbar

Hello,

I need to have ejToolbar which would have ejMenu within it. How can I do that? I can't find any samples. In JavaScript demo I see that there is DropDown added, but nothing in Angular 2, only simple buttons. So, once again, how can I add ejMenu into ejToolbar?


Thanks,
M

7 Replies
KR Keerthana Rajendran Syncfusion Team June 10, 2017 02:08 AM UTC

Hi Me, 
 
Thank you for contacting Syncfusion support, 
 
We have prepared a sample based on your requirement. In the  sample we have added buttons as toolbar items and bound menu to each button on button click. Please refer to the below code snippet. 
 
<ej-toolbar id="toolbarJson" width="550px"> 
            <ul> 
            <li><button class="btn" id="button1" (mouseup)="mouseUp($event)" (click)="Btnclick($event)">Products</button></li> 
            <li><button class="btn" id="button2" (mouseup)="mouseUp($event)" (click)="Btnclick($event)">Company</button></li> 
            <li><button class="btn" id="button3" (mouseup)="mouseUp($event)" (click)="Btnclick($event)">Support</button></li> 
            <li><button class="btn" id="button4" (mouseup)="mouseUp($event)" (click)="Btnclick($event)">Version</button></li> 
    </ul> 
 
            </ej-toolbar> 
            <ej-menu id="contextmenu" animationType="none" [fields.dataSource]="toolbarContext" [fields]="fieldsvalues" contextMenuTarget= ".btn" menuType="contextmenu" > 
 
   </ej-menu> 
 
export class AppComponent { 
        toolbarContext: Array<any>; 
        fieldsvalues: Object; 
       constructor() { 
               this.toolbarContext = [ 
            { id: "1", text: "View" }, 
            { id: "2", text: "Download" }, 
            { id: "3", text: "Save" }, 
            { id: "4", text: "Contact US" } 
          ] 
       this.fieldsvalues = { dataSource: this.toolbarContext, id: 'id', text: 'text'} 
      } 
         Btnclick (event){                        
                 $("#contextmenu").css("visibility","visible"); 
                         var menuobj=$("#contextmenu").data("ejMenu"); 
                         menuobj.show(event.clientX,event.clientY,".btn","click"); 
             } 
      mouseUp(event) 
            { 
        if(event.which==3) 
              $("#contextmenu").css("visibility","hidden");          
            }   
} 
 
We have attached sample for your reference. Please refer to the below given link 
 
 
 
Regards, 
Keerthana.

ME Me June 13, 2017 01:23 PM UTC

It seems like it won't work without id property and I'm using this code to reach ejMenu:
@ViewChild('gpLayoutMenu') private gpLayoutMenu: EJComponents<ej.Menu, any>;

Moreover, if I add multiple instances of same ejMenu component into different tabs (using ejTab) it only would work in one of them. Can I dinamically add id property to ejMenu or how could I make it work without idProperty?




KR Keerthana Rajendran Syncfusion Team June 14, 2017 04:54 PM UTC

Hi Me, 
 
Query : It seems like it won't work without id property 
 
We can apply visibility css to  menu item using custom cssClass without using id of menu. This css will be applied to all the menu items having the same custom class. You can get the instance of menu by using the below code 
 
<ej-menu #gpLayoutMenu animationType="none" [fields.dataSource]="toolbarContext" cssClass="custom" [fields]="fieldsvalues" contextMenuTarget= ".btn" menuType="contextmenu" > 
 
   </ej-menu> 
 
export class GridComponent { 
    toolbarContext: Array<any>; 
    fieldsvalues: Object; 
     @ViewChild('gpLayoutMenu') private gpLayoutMenu: EJComponents<ej.Menu, any>;                 constructor() { 
        this.toolbarContext = [ 
            { id: "1", text: "View" }, 
            { id: "2", text: "Download" }, 
            { id: "3", text: "Save" }, 
            { id: "4", text: "Contact US" } 
        ] 
       this.fieldsvalues = { dataSource: this.toolbarContext, id: 'id', text: 'text'}; 
          
    } 
         btnclick (event){             
          
                 $(".e-menu.custom").css("visibility","visible"); 
                  this.gpLayoutMenu.widget.show(event.clientX,event.clientY,".btn","click"); //instance of menu 
                                                  
             } 
                mouseUp(event) 
                        { 
                if(event.which==3) 
                           $(".e-menu.custom").css("visibility","hidden");      
                        } 
              
} 
 
Query : Moreover, if I add multiple instances of same ejMenu component into different tabs (using ejTab) it only would work in one of them. Can I dynamically add id property to ejMenu or how could I make it work without idProperty?  
 
We have prepared a sample by adding toolbar with menu inside ejTab based on our understanding. Please refer to the below given link for sample 
 
 
 
Please provide us some clear details on the following 
 
  1. Whether you are using menu , toolbar and tab as updated in the above sample?
  2. Components used in your sample and the structure in which they are rendered.
  3. Whether each toolbar item is bound to a separate menu?
  4. Scenario in which multiple instances of same ejMenu component has to be added into different tabs (using ejTab)
  5. If possible please share us the code used in your sample.
 
So that we will analyze and update you a better solution at the earliest 
 
Regards, 
Keerthana. 


ME Me June 16, 2017 02:56 PM UTC

Syncfusion version: 15.1.0.41

In my case, if I set menuType to contextmenu I must add id attribute, otherwise I get this error:

EXCEPTION: Error in ./GPToolbarLayoutButtonComponent class GPToolbarLayoutButtonComponent - inline template:1:10 caused by: Syntax error, unrecognized expression: .e-menu-wrap #
ErrorHandler.handleError @ core.umd.js?e2a5:3462
next @ core.umd.js?e2a5:6924
schedulerFn @ core.umd.js?e2a5:6172
SafeSubscriber.__tryOrUnsub @ VM7725:223
SafeSubscriber.next @ VM7725:172
Subscriber._next @ VM7725:125
Subscriber.next @ VM7725:89
Subject.next @ VM7721:55
EventEmitter.emit @ core.umd.js?e2a5:6164
onError @ core.umd.js?e2a5:6388
onHandleError @ core.umd.js?e2a5:6263
ZoneDelegate.handleError @ zone.js?fad3:236
Zone.runTask @ zone.js?fad3:157
ZoneTask.invoke @ zone.js?fad3:335
core.umd.js?e2a5:3464 ORIGINAL EXCEPTION: Syntax error, unrecognized expression: .e-menu-wrap #
ErrorHandler.handleError @ core.umd.js?e2a5:3464
next @ core.umd.js?e2a5:6924
schedulerFn @ core.umd.js?e2a5:6172
SafeSubscriber.__tryOrUnsub @ VM7725:223
SafeSubscriber.next @ VM7725:172
Subscriber._next @ VM7725:125
Subscriber.next @ VM7725:89
Subject.next @ VM7721:55
EventEmitter.emit @ core.umd.js?e2a5:6164
onError @ core.umd.js?e2a5:6388
onHandleError @ core.umd.js?e2a5:6263
ZoneDelegate.handleError @ zone.js?fad3:236
Zone.runTask @ zone.js?fad3:157
ZoneTask.invoke @ zone.js?fad3:335
core.umd.js?e2a5:3467 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ core.umd.js?e2a5:3467
next @ core.umd.js?e2a5:6924
schedulerFn @ core.umd.js?e2a5:6172
SafeSubscriber.__tryOrUnsub @ VM7725:223
SafeSubscriber.next @ VM7725:172
Subscriber._next @ VM7725:125
Subscriber.next @ VM7725:89
Subject.next @ VM7721:55
EventEmitter.emit @ core.umd.js?e2a5:6164
onError @ core.umd.js?e2a5:6388
onHandleError @ core.umd.js?e2a5:6263
ZoneDelegate.handleError @ zone.js?fad3:236
Zone.runTask @ zone.js?fad3:157
ZoneTask.invoke @ zone.js?fad3:335
core.umd.js?e2a5:3468 Error: Syntax error, unrecognized expression: .e-menu-wrap #
    at Function.ga.error (http://localhost:3000/node_modules/jquery/dist/jquery.min.js:2:13470)
    at ga.tokenize (http://localhost:3000/node_modules/jquery/dist/jquery.min.js:2:19459)
    at ga.select (http://localhost:3000/node_modules/jquery/dist/jquery.min.js:2:22349)
    at Function.ga [as find] (http://localhost:3000/node_modules/jquery/dist/jquery.min.js:2:7308)
    at r.fn.init.find (http://localhost:3000/node_modules/jquery/dist/jquery.min.js:2:24958)
    at r.fn.init (http://localhost:3000/node_modules/jquery/dist/jquery.min.js:2:25448)
    at r (http://localhost:3000/node_modules/jquery/dist/jquery.min.js:2:601)
    at Object._contextMenu_Template (http://localhost:3000/node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:1333988)
    at Object._renderControl (http://localhost:3000/node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:1318331)
    at Object._renderMenu (http://localhost:3000/node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:1317126)
    at Object._intializeData (http://localhost:3000/node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:1316953)
    at Object._init (http://localhost:3000/node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:1316284)
    at Object.<anonymous> (http://localhost:3000/node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:21539)
    at r.fn.init.n.fn.(anonymous function) [as ejMenu] (http://localhost:3000/node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:22796)
    at CreateComponent.comp.Class.constructor.EJComponents.ngAfterContentInit (eval at <anonymous> (http://localhost:3000/app.js:144:2), <anonymous>:164:64)


Any idea why?


KR Keerthana Rajendran Syncfusion Team June 19, 2017 12:52 PM UTC

Hi Me, 
 
We have checked the reported issue by removing id attribute in context menu sample we were unable to reproduce the issue in our end. We have modified the previous sample by removing “id” attribute of menu and used class name to show menu on button click. Please verify the below code 
 
<ej-menu class="context" animationType="none" [fields.dataSource]="toolbarContext" cssClass="custom" [fields]="fieldsvalues" contextMenuTarget= ".btn" menuType="contextmenu" > 
 
   </ej-menu> 
 
btnclick(event){          
          
                 $(".e-menu.custom").css("visibility","visible"); 
                   var menuobj=$(".context").data("ejMenu");  
                  menuobj.show(event.clientX,event.clientY,".btn","click");  
             } 
 
Please download the modified sample from the below link 
 
 
 
Regards, 
Keerthana.

ME Me June 23, 2017 06:31 AM UTC

Hello,


I created a sample for you. There are two problems:
1. You are only able to close contextMenu by click on ejToolbar because it catches onClick event and executes - Hide(). How can I make contextMenu to be closed like any normal context menu - when clicked anywhere else?
2. Not able to remove id tag, errors occurs.

Here is image how it works:

Files needed for this sample:


Id tag:



P.S. I attached sample.



Attachment: customContextMenuSample_4cecce86.rar

KR Keerthana Rajendran Syncfusion Team June 27, 2017 12:16 PM UTC

Hi Me,   
   
We have checked your attached sample.    
   
Query 1: You are only able to close contextMenu by click on ejToolbar because it catches onClick event and executes - Hide(). How can I make contextMenu to be closed like any normal context menu - when clicked anywhere else?   
   
We suggest you to use clickOutside event to hide the context menu when it clicked anywhere or else in the window. Please refer the below given code   
   
template: `<ej-toolbar [dataSource]="dataSource" [fields]="fieldsvalues" cssClass="customCssClass" [isResponsive]="true" (click)="onToolbarButtonClicked($event)"  (clickOutside)="onClickedOutside($event)"></ej-toolbar>   
                      
   
onClickedOutside(e: Event)    
{   
     this.myCustomMenuButton.Hide();   
  }   
  
   
Please refer the below given link for further details   
   
   
We have modified your sample including with these changes. Please refer to the below given link   
   
   
   
Query 2: Not able to remove id tag, errors occurs   
   
We have removed the id attribute in the provided sample and the sample works fine at our end.  We have also attached a video for your reference. Please refer the below given link   
   
          
Regards,   
Keerthana.  
 


Loader.
Up arrow icon