1. Home
  2. Forum
  3. ASP.NET MVC
  4. Generic Context Menu - Using with other controls

Generic Context Menu - Using with other controls

Good day,

I have noticed that TreeGrid, Grid and other controls have a different syntax for creating and handling context menu. As if these components are not the part of the same suite.

This is very frustrating as each control context menu has to be configured and handled in a different way.

I would like to use  a generic context menu (Menu Control) and bind it to individual controls when I need.

Could you provide some sample on how this can be achieved with the most common controls such are grid, treegrid, chart, text etc and how to handle click events (retreive underlining control information e.g. row, value etc.)

For example I can create a Context Menu and assign target to TreeGrid control, but how do I handle events and get information on the selected row?

@Html.EJ().Menu("MyTreeGridContextMenu").Items(items =>
{
    items.Add().Text("Deal").ImageUrl("../../Content/images/Deal.png").Id("Deal");
    items.Add().Text("Properties");
}).MenuType(MenuType.ContextMenu).OpenOnClick(true).ContextMenuTarget("#TreeGridContainer")

1 Reply
KR Keerthana Rajendran Syncfusion Team May 2, 2018 04:18 AM UTC

Hi Bojan,  
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your query. Your requirement for adding context menu for  chart , TreeGird and Grid can be achieved using Syncfusion menu component.  
 
Chart:  
 
Kindly find the code snippet below for adding context menu for chart control. 
 
ASP.NET MVC:  
 
@(Html.EJ().Chart("container")  
      //...  
)  
  
@Html.EJ().Menu("docfile").Items(items =>  
        {  
            items.Add().Url("").Text("Enable Canvas");  
            //...  
       })  
         
    //Specify the type here  
   .MenuType(MenuType.ContextMenu)  
      
   //Specify the chart id here, in order show context menu on chart  
  .ContextMenuTarget("#container")  
  
    //Handling Click event in Menu component   
  .ClientSideEvents(ce => ce.Click("menuClick"))  
  
function menuClick(args) {  
        chart = $("#container").ejChart("instance");  
        if (args.text == "Enable Canvas") {  
            chart.model.enableCanvasRendering = chart.model.enableCanvasRendering == false ?true : false;  
            chart.redraw();  
        }  
         
        //...  
}  
 
Screenshot:  
   
 
Sample for reference can be find from below link.  
 
   
  
TreeGrid:  
  
In TreeGrid, we have event called “contextMenuOpen”. By using this event, we can customize the context menu and operations.  
  
Please refer following code snippet 
 
@(Html.EJ().TreeGrid("container")  
.ContextMenuSettings(cms => cms.ShowContextMenu(true)  
                               .ContextMenuItems(new List<TreeGridContextMenuItems>() {  
              TreeGridContextMenuItems.Add,TreeGridContextMenuItems.Edit,TreeGridContextMenuItems.Delete  
          }))  
            .ClientSideEvents(cv => cv.ContextMenuOpen("contextMenuOpen"))  
  
<script type="text/javascript">  
        function contextMenuOpen(args) {  
            
            var isExpandable = true, isCollapsable = true, data;  
            data = args.item;  
            if (data && data.hasChildRecords) {  
                if (data.expanded)  
                    isExpandable = false;  
                else  
                    isCollapsable = false;  
            } else {  
                isExpandable = false;  
                isCollapsable = false;  
            }  
            if (data) {  
                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);  
            }  
        }  
  
         
        function customMenuExpandCollapseHandler(args) {  
            var currentMenuId = args.menuId, expandCollapseArgs = {};  
            expandCollapseArgs.data = args.data;  
            if (currentMenuId === "Expand")  
                expandCollapseArgs.expanded = true;  
            else  
                expandCollapseArgs.expanded = false;  
            ej.TreeGrid.sendExpandCollapseRequest(this, expandCollapseArgs);  
        }  
         
    </script>  
 
Please find the sample location as below,  
  
Grid: 
 
We can achieve the requirement by binding the menu context menu and on menu open event we have selected record details using getCurrentViewData method of Grid. Please refer the below code snippet  
  
<script type="text/javascript">  
    var selectedRecord;  
    $("#contextMenu").ejMenu(  
                             {  
                                 menuType: ej.MenuType.ContextMenu,  
                                 openOnClick: false,  
                                 contextMenuTarget: "#grdSample",  
                                 open: function (args) {  
                                     var Index = args.target.closest("tr").rowIndex;  
                                     var gridObj = $("#grdSample").ejGrid("instance");  
                                     selectedRecord = gridObj.getCurrentViewData()[Index];  
                                     console.log(selectedRecord)  
                                 }  
                             });  
</script>  
  
    
For your convenience we have attached the sample which can be downloaded from below link  
  
  
Refer our help documentation for your reference  
  
  
 
Regards, 
Keerthana. 


Loader.
Up arrow icon