We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

displaying shortcuts

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

1 Reply

SI Silambarasan I Syncfusion Team January 7, 2019 12:17 PM UTC

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: 
 
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 


Loader.
Live Chat Icon For mobile
Up arrow icon