Grid context menu. Add images and separator

[Agne]

Hello,

I have several questions about grid context menu and submenu items:

1. How can I add images in context menu?

2. How can I add separator between items in context menu?

3. Can I use as id property number type value instead of char/string?

I am creating context menu like this, but image not showing and I am getting error when I am trying to use id as number and not as string:

<ej-grid #myGrid [contextMenuSettings]="contextMenuSettings"(contextOpen)="onContextMenuOpen($event)"></ej-grid>

private contextMenuItems: Array<any> = [];

private subContextMenuItems: Array<any> = [];

this.contextMenuItems.push({ id: '1', text: "Clear Selection", imageUrl: "/src/deps/images/menu/lightning_power_yellow_16.png" });

this.contextMenuItems.push({ id: '2', text: "Hide column" });

this.subContextMenuItems.push({ contextMenuItem: '1', subMenu: ["OrderID", "CustomerID", "EmployeeID"] });

this.subContextMenuItems.push({ contextMenuItem: '2', subMenu: ["OrderID", "CustomerID", "EmployeeID"] })

this.contextMenuSettings = { enableContextMenu: true, customContextMenuItems: this.contextMenuItems, subContextMenu: this.subContextMenuItems };

And this is how my context menu looks (no image showing and I do not know how to add separator between items):

And here is error when I am trying to use id like number (maybe it is my problem somewhere else in my code(?)):

[Saravanan Arunachalam]

Hi Agne, 

Thanks for contacting Syncfusion’s support. 

We have analyzed your requirement that we have achieved by using “create” event of Grid control. Please refer to the below code example. 

Index.html 

<style> 

        .e-grid .e-customitem>span{ 

            top: "30%"; 

            position: absolute; 

        } 

    </style> 

 

Component.html 

<ej-grid #myGrid [contextMenuSettings]="contextMenuSettings"(contextOpen)="onContextMenuOpen($event)" (create)="onCreate($event)"></ej-grid> 

 

Component.ts 

export class GridComponent { 

    . . . 

    onCreate(args){ 

        //Add the separator 

        $("#1").addClass("e-separator"); 

        //Add icon to the items 

        $("#1").prepend("<span  class='e-icon e-cancel'></span>"); 

        $("#2").prepend("<span  class='e-icon e-save'></span>"); 

    } 

} 

 

Regards, 

Saravanan A. 

[Agne]

Thank you, it is very helpful!

I have one more question about this - maybe there is some possibility add images not using jQuery with prepend/append, but there is some grid context menu item property like imageUrl, icon or something like that? Or maybe this will be done in the future?

[Saravanan Arunachalam]

Hi Agne, 

We have rendered the context menu based on the <ul><li> template at our source side. In <ul> <li> template, we need to manually add a <span> element with image class inside the <a> tag to display image and we cannot set it using spriteCssClass field as the datasource property which is empty for rendering using <ul> template. Kindly refer to the following playground sample: http://jsplayground.syncfusion.com/mnc4wyki  

So, we can achieved your requirement by append the <span> to add icon for the context item in the create event of ejGrid control which is like provided in the previous update. 

Regards, 

Saravanan A.