contextMenuModule on childGrid

Question

When using the contextMenuModule on the Grid, I'm able to show/hide specific items upon opening the ContextMenu with contextMenuModule.contextMenu.hideItems (see example here: https://stackblitz.com/edit/grid-sample-context-menu-example-233748). How does this work within a childGrid? grid.childGrid does not have a contextMenuModule.

Thanks for your help,

Markus

Rajapandiyan Settu · Answer

Hi Markus, 
 
Thanks for your update. 
 
Query : When using the contextMenuModule on the Grid, I'm able to show/hide specific items upon opening the ContextMenu with contextMenuModule.contextMenu.hideItems. How does this work within a childGrid? grid.childGrid does not have a contextMenuModule. 

From your query we could see that you are unable to show the contextMenu in the childGrid. To show the context menu in the child grid we need bind the contextMenuItems separately for the childGrid. Please refer the below code example and sample for more information. 






let grid: Grid = new Grid({ 
        dataSource: employeeData, 
        toolbar: [ ], 
        columns: [ 
            { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 }, 
            { field: 'FirstName', headerText: 'Name', width: 125 }, 
            { field: 'Title', headerText: 'Title', width: 180 }, 
            { field: 'City', headerText: 'City', width: 110 } 
        ], 
        contextMenuItems: [ 
        { text: "Edit Content", target: ".e-content", id: "custom-edit", iconCss: "fas fa-pencil-alt" }, 
        { text: "Edit Sequencing", target: ".e-content", id: "sequencing", iconCss: "fas fa-pencil-alt" }, 
    ], 
    contextMenuOpen: (args: BeforeOpenCloseMenuEventArgs) => { 
      let data: any = grid.getSelectedRecords()[0]; 
      if(data.EmployeeID%2 == 0) { 
      grid.contextMenuModule.contextMenu.hideItems(['Edit Sequencing']); 
       } 
      else { 
        grid.contextMenuModule.contextMenu.showItems(['Edit Sequencing']); 
      } 
    }, 
        childGrid: { 
            dataSource: hierarchyOrderdata, 
            queryString: 'EmployeeID', 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 
                { field: 'ShipCity', headerText: 'Ship City', width: 120 } 
            ], 
// bind the contextMenuItems for the childGrid 
            contextMenuItems: [ 
        { text: "Edit Content", target: ".e-content", id: "custom-edit", iconCss: "fas fa-pencil-alt" }, 
        { text: "Edit Sequencing", target: ".e-content", id: "sequencing", iconCss: "fas fa-pencil-alt" }, 
    ], 
contextMenuOpen: (args: BeforeOpenCloseMenuEventArgs) => { 

      let data: any = args.rowInfo.rowData; 
// get the childGrid Instances 
      let childgridinstances = (parentsUntil(args.rowInfo.cell, 'e-grid') as any).ej2_instances[0]; 
// hiding and showing the contextMenuItems 
      if(data.EmployeeID%2 == 0) { 
      childgridinstances.contextMenuModule.contextMenu.hideItems(['Edit Sequencing']); 
       } 
      else { 
        childgridinstances.contextMenuModule.contextMenu.showItems(['Edit Sequencing']); 
      } 
    }, 
        } 
    }); 
    grid.appendTo('#Grid'); 




Sample : https://stackblitz.com/edit/darhbw-mgdv9s?file=index.ts 

UG : https://ej2.syncfusion.com/documentation/grid/context-menu/?no-cache=1 

Please get back to us if you need further assistance. 

Regards, 
Rajapandiyan S.

Markus · Answer

Thanks for the sample, worked perfectly./Markus

Rajapandiyan Settu · Answer

Hi Markus, 
 
We are glad that the provided solution is resolved your requirement. 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Rajapandiyan S.