Remvong default items from the Context Menu

[Bojan Kuhar]

Is it possible to remove default menu items (Add, Delete) from the context menu? I am adding my custom menu items using ContextMenuOpen event and I don't want default menu items rendered.

[Punniyamoorthi Elangovan]

Hi Bojan, 

Thank you for contacting Syncfusion support 

We have analyzed your requirement. We can remove the default menu items from context menu by using the below code snippet. 

<script type="text/javascript"> 

        function contextMenuOpen(args) { 

              var contextMenuItems = [ 

                 { 

                     headerText: "Expand", 

                     menuId: "Expand", 

                     eventHandler: customMenuExpandCollapseHandler, 

                     iconClass: "e-expandIcon", 

                     disable: !isExpandable 

                 }, 

                 { 

                     headerText: "Collapse", 

                     menuId: "Collapse", 

                     eventHandler: customMenuExpandCollapseHandler, 

                     iconClass: "e-collapseIcon", 

                     disable: !isCollapsable 

                 } 

                ]; 

                args.contextMenuItems = []; 

                args.contextMenuItems.push.apply(args.contextMenuItems, contextMenuItems); 

} 

</script> 

 

We have prepared the sample with your requirement, please find the sample link below 

http://www.syncfusion.com/downloads/support/forum/137243/ze/custom_context_menu470619421 

 

Please let us know if you require further assistance on this. 

Regards, 

Punniyamoorthi 

  

[Bojan Kuhar]

Hi,

Images next to the menu items are not rendered on the same line. 

// When context menu opens we can customise menu items
    function contextMenuOpen(args) {
 
 
     var contextMenuItems = [
         {
             headerText: "Share Deals",
             menuId: "Deals",
             eventHandler: customMenuShareDeals,
             iconPath: "url(../../Content/images/Deal.png)",
         },
         {
             headerText: "Market Info",
             menuId: "Market",
             eventHandler: customMenuShareMarket,
             iconPath: "url(../../Content/images/Market.png)",
         }
     ];
     args.contextMenuItems = [];
     args.contextMenuItems.push.apply(args.contextMenuItems, contextMenuItems); 

Attachment: 20180427_72323_dddf7eb5.zip

[Manikandan Manikam]

Hi Bojan, 

Please find the response below. 

If we assign the iconPath for custom menu item, this image will set as background image for that menu item’s icon container. Sometime this alignment issue occurs due to image size variations. 

We can resolve this alignment issue by setting  background-position as center and also we can customize the CSS style of context menu element  by overriding default style. 

Please find the code change for this below. 

[html] 

<style> 

  #custom1 > div.e-icon.e-contextmenu-image, 

  #custom2 > div.e-icon.e-contextmenu-image { 

     background-position: center; 

  } 

</style> 

We have prepared sample for this, please find the sample link below. 

Sample Link – http://jsplayground.syncfusion.com/5cqph4gc 

Please let us know, if you require further assistance on this. 

 

Note: #custom1, #custom2 elements are menu id of custom menu item. 

 

Thanks, 

Manikandan M. 

[Bojan Kuhar]

Applying the style that you have supplied works. 

Thank you.

[Jayakumar Duraisamy]

Hi Bojan, 

We are glad that your issue has been resolved. Please let us know, if you need any other assistance. 

Regards, 

Jayakumar D