Get data from grid and display in context Menu

[Paul Kocher]

Hi!

I have customer data in a grid and would like to add functionality to call, text or mail a customer from the context menu.

Was thinkign about something like this:

{ text: 'Call Mobile: ' + mobileNr, target: '.e-content', id: 'callMobile', url: 'tel:' + mobileNr }

unfortunately I cannot get this working. This is what I tried:

public contextMenuItems: ContextMenuItemModel[] = [];

onContextMenuOpen(e: any) {

var rowInfo = this.gridObj.getRowInfo(e.event.target);

let mobileNr: string = rowInfo.rowData['mobiltel']

this.contextMenuItems.push({

text: 'Call Mobile: ' + mobileNr, target: '.e-content', id: 'callMobile', url: 'tel:' + mobileNr

});

}

No error is thrown but no context menu is shown either.

Any idea how to achieve this?

Thanks

Paul

[Madhu Sudhanan P]

Hi Paul, 

You can achieve your requirement by using the below solution in which We have changed the properties of ContextMenu Items dynamically based on the clicked row. Please refer to the below code example and sample link. 

[component.ts] 

@Component({ 

  selector: 'app-container', 

  template: `<ejs-grid #grid [dataSource]='data' id="gridcomp"  

  allowPaging='true' [allowExcelExport]='true' [allowPdfExport]='true' height='220px' [allowSorting]='true' 

      (contextMenuOpen)='contextMenuOpen($event)' [contextMenuItems]="contextMenuItems" [editSettings]='editing' [allowGrouping]='true'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Right" isPrimaryKey='true'></e-column> 

           .     .     . 

        </e-columns> 

    </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

  .   .  . 

  public contextMenuItems: any[] = [{ text: 'Call Mobile: ', target: '.e-content', id: 'callMobile', url: 'tel:' }]; 

 

contextMenuOpen(e: any) { 

    const rowInfo: any = this.grid.getRowInfo(e.event.target); 

    const mobileNr: string = rowInfo.rowData[OrderID]; 

    // dynamically changing the “text” and “url” properties of ContextMenu items. 

    this.grid.contextMenuModule.contextMenu.items.filter((item) => item.id === 'callMobile')[0].text = 'Call Mobile: ' + mobileNr; 

    this.grid.contextMenuModule.contextMenu.items.filter((item) => item.id === 'callMobile')[0].url = 'tel: ' + mobileNr; 

  } 

} 

Sample    : https://stackblitz.com/edit/angular-6e3xoa-sm4ccd?file=context-menu.html  

Please let me know if you have any concern. 

Regards, 

Madhu Sudhanan P 

[Paul Kocher]

Hello Madhu,

I just wanted to let you know that the issue has been resolved after I followed your solution.

Thanks!

[Madhu Sudhanan P]

Hi Paul, 

Thanks for the update. We are glad that the requirement has been achieved. 

Regards, 

Madhu Sudhanan P