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

Context menu. Add SubSubMenu.

Hello,

is there a possibility to add SubSubMenu ir ejGrid context menu?

To look like this:


3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team July 27, 2017 04:11 PM UTC

Hi Agne, 

Thanks for contacting Syncfusin support. 

We have analyzed your query and this is already an known improvement “Template support for subcontextmenu items”. It will be included in our Volume 3, 2017 which has been scheduled to be rolled in the first week of August 2017. 
 
Regards, 
Thavasianand S. 



AG Agne September 11, 2017 09:42 AM UTC

Hello again,

I want to ask maybe there is a possibility in newest release to add SubSubMenu in ejGrid context menu like I asked before? Or I can do it only with ejMenu component?



TS Thavasianand Sankaranarayanan Syncfusion Team September 12, 2017 01:17 PM UTC

Hi Agne, 

Thanks for your update. 

In the latest Essential studio version(15.3.0.29), we are able to render the submenu inside another submenu as a template in the contextmenu of ejGrid control. 

Refer the below code example. 

[app.component.html] 

<ej-grid id="Grid" [dataSource]="gridData2" [allowPaging]="true" [allowSorting]="true" 
 
   [contextMenuSettings]="contextMenuSettings" (contextClick)= "contextClick($event)">  
 
    <e-columns> 
         
        ---- 
 
   </e-columns> 
 
</ej-grid> 
 
--------------------------------------- 
[app.component.ts] 

export class AppComponent { 
      
     public contextMenuSettings; 
      
        contextClick(e: any){ 
        
              alert(e.text); 
        
        } 

          constructor() { 
 
 
        this.contextMenuSettings = { 
 
            enableContextMenu: true, contextMenuItems: [], 
 
            customContextMenuItems: [{ id: 'clear', text: "Clear Selection" }, 
                                     { id: 'hide', text: "Hide column" } 
            ], 
 
            subContextMenu: [{ 
 
                contextMenuItem: "hide", 
 
                template: "#template" 
            }] 
        }; 
 
    } 
} 
 
-------------------------------------------- 
[index.html] 

<script type="text/x-jsrender" id="template"> 
        <ul> 
            <li> 
               <a>OrderID</a> 
               <ul> 
                  <li><a>10248</a></li> 
                 <li><a>10249</a></li> 
                </ul> 
           </li> 
            <li><a>CustomerID</a></li> 
            <li><a>EmployeeID</a></li> 
        </ul> 
</script> 



Refer the below screen shot. 

 

We have prepared a sample and it can be downloadable from the below location. 


Refer the help documentation. 


Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon