displaying shortcuts

[sk]

Is there a way to display keyboard shortcut e.g Ctrl+C to the right of a menu item.

[Silambarasan I]

Hi Sampurnima, 

 

Thank you for contacting Syncfusion support. 

 

We have looked into the reported query and we would like to let you know that, your requirement “customize to display keyboard shortcut e.g Ctrl+C to the right of a menu item” can be achievable by using ‘template’ property in EJ2 Menu. In the following code example, we have added some menu items with shortcut info. Please refer the below screenshot. 

 

 

Sample Link: 

https://stackblitz.com/edit/typescript-qygz3g?file=index.ts 

 

Index.ts 

 

import { Menu } from '@syncfusion/ej2-navigations'; 

import { enableRipple } from '@syncfusion/ej2-base'; 

 

enableRipple(true); 

 

//Menu items datasource 

let menuItems: { [key: string]: Object }[] = [ 

  { 

    text: 'File', 

    iconCss: 'em-icons e-file', 

    //… 

  }, 

  { 

    text: 'Edit', 

    items: [ 

      { text: 'Cut', shortcut: 'Ctrl + X' }, 

      { text: 'Copy', shortcut: 'Ctrl + C' }, 

      { text: 'Paste', shortcut: 'Ctrl + V' } 

    ] 

  }, 

 //… 

]; 

 

let templateStr: string = '<span>' + 

            '${if(iconCss)}<span class="e-menu-icon ${iconCss}"></span>${/if}' + 

            '${if(text)}${text}${/if}' + 

            '${if(shortcut)}<span class="e-shortcut-elem">${shortcut}</span>${/if}' + 

          '</span>'; 

 

// Initialize Menu component. 

let menuObj: Menu = new Menu({ 

  items: menuItems, 

  fields: { 

    text: 'text', 

    children: ['items'] 

  }, 

  template: templateStr 

}, '#menu'); 

 

 

 

Could you please check the above sample and get back to us if you need any further assistance? 

 

Regards, 

Silambarasan