Show context Menu on click

Question

How to open a menu (like contextmenu) when i click on command button in the row (ellipse image on right)Something similar to this

Balaji Sekar · Answer

Hi Vin, Greetings from the Syncfusion support. Based on your query, we can open the context menu popup in the command button using command click event. In below code example, we have open the context menu popup manually in the commandclick event of the Grid. Please refer the below code example and sample for more information. [app.component.html]

. . . .

[app.component.ts] public ngOnInit(): void { . . . . this.commands = [ { buttonOption: { iconCss: 'glyphicon glyphicon-option-vertical', cssClass: 'e-flat' } }, ]; this.contextMenuItems = ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending', 'Copy', 'Edit', 'Delete', 'Save', 'Cancel', 'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage', 'PrevPage', 'LastPage', 'NextPage']; } public commandClick(args:any){ (this.grid.contextMenuModule).element.ej2_instances[0].openMenu(null, null, (event).pageY, (event).pageX, event); } Sample link: https://stackblitz.com/edit/angular-yq3sth-6dmv74 Please get back to us, if you need further assistance. Regards, Balaji Sekar

vin · Answer

Thank you for the quick helpI have few Q'sQ1 How do i customize the menu with my own items and add click event to the items?Q2 -With iconCss: 'glyphicon glyphicon-option-vertical' ==> the image does not show, am i missing a do we have something similar? iconCss: 'e-edit e-icons'@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';  @import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';@import '../node_modules/@syncfusion/ej2-angular-notifications/styles/material.css';@import '../node_modules/@syncfusion/ej2-angular-popups/styles/material.css';

Balaji Sekar · Answer

Hi Vin, Query #1: How do i customize the menu with my own items and add click event to the items? We can bind the custom context menu items in the context menu it is already discussed our documentation. Please refer the below documentation for more information. Help Documentaion: https://ej2.syncfusion.com/angular/documentation/grid/context-menu/?no-cache=1#custom-context-menu-items Query #2: With iconCss: 'glyphicon glyphicon-option-vertical' ==> the image does not show, am i missing, do we have something similar? In our previous update, we have used the boostrap css file in cdn link in the index.html page. Please refer the below code example. [index.htmll] Window If you need use the bootstrap package in your application, please find the below documentation for more information. Bootstrap Documentation: https://getbootstrap.com/docs/3.4/getting-started/ Please get back to us, if you need further assistance. Regards, Balaji Sekar

vin · Answer

Do i have to use 3.3.6 ver only, its affecting my other styles?

when i try 4.x version its not working

 <link rel="stylesheet" rel='nofollow' rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

Balaji Sekar · Answer

Hi Vin, 
 
We have analyzed the migration of the Bootstrap v4.0.0 version. It has been dropped the Glyphicons icon font, that means Bootstrap won't offer Glyphicon support. Please refer the below documentations for more information. 

Documentation: https://getbootstrap.com/docs/4.0/migration/#components 
                                https://stackoverflow.com/questions/49806342/glyphicons-is-not-showing-in-browser-using-bootstrap-in-html-code 

Please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar

vin · Answer

When i changed the

public contextMenuItems: ContextMenuItem[];

changed to add custom menu names

public contextMenuItems: ContextMenuItemModel[];

this.contextMenuItems = [{ text: 'Profile Edit', target: '.e-content', id: 'profileEdit' },

{ text: 'Password Reset Link', target: '.e-content', id: 'passwordLink' }

];

I get error this.grid.contextMenuModule as undefined

public commandClick(args:any){

(this.grid.contextMenuModule).element.ej2_instances[0].openMenu(null, null, (event).pageY, (event).pageX, event)

}

[contextMenuItems]="contextMenuItems" (contextMenuClick)='contextMenuClick($event)'

(commandClick)="commandClick($event)">

Balaji Sekar · Answer

Hi Vin,

We have validated your query with the information provided and we suspect the instance of the Grid component is not undefined in your application. Please find the example below highlighted text that is needed to take a grid instance and also ensure that your ending is correct.

[app.component.html]

<ejs-grid #grid [dataSource]='data' [contextMenuItems]="contextMenuItems" (commandClick)="commandClick($event)">

. . . .

</ejs-grid>

[app.component.ts]

import { Component, OnInit,ViewChild } from '@angular/core';

import { CommandColumnService, CommandModel,GridComponent, ContextMenuService,ContextMenuItem } from '@syncfusion/ej2-angular-grids';

export class AppComponent {

@ViewChild("grid")

public grid:GridComponent // Here, bind the Grid component instance in Angular application(this), now you can use “this.grid” in commandClick event

}

For your reference, we have shared documentation for purpose of the ViewChild in Angular.

Documentation: https://angular.io/api/core/ViewChild#description

Please get back to us, if you need further assistance.

Regards,

Balaji Sekar