Adding ejMenu to ejToolbar

[Me]

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

[Keerthana Rajendran]

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 

 

Sample: https://www.syncfusion.com/downloads/support/forum/130875/ze/Toolbar-767790378.zip 

 

 

Regards, 

Keerthana.

[Me]

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?

[Keerthana Rajendran]

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 

 

Sample: https://www.syncfusion.com/downloads/support/forum/130875/ze/Sample-211964573.zip 

 

 

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]

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?

[Keerthana Rajendran]

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 

 

Sample: https://www.syncfusion.com/downloads/support/forum/130875/ze/Menu-1036962757.zip 

 

 

Regards, 

Keerthana.

[Me]

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

[Keerthana Rajendran]

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   

   

Link: https://www.npmjs.com/package/ng-click-outside   

   

We have modified your sample including with these changes. Please refer to the below given link   

   

Sample: https://www.syncfusion.com/downloads/support/forum/130875/ze/Custom_context_menu-962184548.zip   

   

   

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   

   

Video: https://www.syncfusion.com/downloads/support/forum/130875/ze/Issue-116155107.zip   

          

Regards,   

Keerthana.