1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Hide custom context menu of a grid

Hide custom context menu of a grid

Hi,

I am using a grid component with a custom context menu. I want to hide some context menu items depending on the row selected. For that, I call a contextMenuOpen function. In a different code, I already done that with a diagram, using the code "args.hiddenItems.push(item.id);" (see the code below):

          function contextMenuOpen(args) {
                    if (args == null || args.items == null) {
                        return;
                    }
                    
                    for (let item of args.items) {
                        switch (item.id) {
                            case 'oneCOntextMenuItem':
                                if (someConditionalTest) {
args.hiddenItems.push(item.id);
                                }
                            break;
                        }
                    }
                }

It seems that with a grid, args.hiddenItems.push(item.id) is not working, and that I should use the target property of  the contextMenuItem. But I can't manage to do this, because i dno't find the documentatio related to this property.

    function contextMenuOpen(args) {
                    if (args == null || args.items == null) {
                        return;
                    }
                    
                    for (let item of args.items) {
                        switch (item.id) {
                            case 'oneCOntextMenuItem':
                                if (someConditionalTest) {
item.target= ??;
                                }
                            break;
                        }
                    }
                }

Can you provide me the code to hide a contextMenuItem of a custom context menu for a grid?
regards,

3 Replies 1 reply marked as answer
RR Rajapandi Ravi Syncfusion Team May 13, 2021 11:41 AM UTC

Hi Laurent, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to enable/disable the custom context menu item based on the condition. You can enable and disable the menu items using the enableItems method in ContextMenu. To enable menuItems, set the enable property in argument to true and vice-versa.  

Based on your query we have prepared a sample and achieved your requirement by using contextMenuOpen event of Grid. Please refer the below code example and sample for more information. 

 
@{ 
    List<object> ContextMenuitems = new List<object>(); 
    ContextMenuitems.Add(new { text = "Copy with headers", target = ".e-content", id = "copywithheader" }); 
} 
<div> 
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" contextMenuItems="ContextMenuitems" contextMenuOpen="contextOpen" contextMenuClick="contextMenuClick" allowGrouping="true" allowFiltering="true" allowPaging="true"> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column> 
            <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column> 
            <e-grid-column field="OrderDate" headerText="Order Date" type='date' format='yMd' editType="datepickeredit" width="170"></e-grid-column> 
            <e-grid-column field="Verified" headerText="Verified" width="150"></e-grid-column> 
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="140"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
    function contextMenuClick(args) { 
        if (args.item.id === 'copywithheader') { 
            this.copy(true); 
        } 
    } 
 
    function contextOpen(args) { 
        if (args.rowInfo.rowData.OrderID % 2 == 0) { 
            args.element.ej2_instances[0].enableItems(['Copy with headers'], false); //disable 
        } 
        else { 
            args.element.ej2_instances[0].enableItems(['Copy with headers'], true);  //enable 
        } 
    } 
</script> 
 
 



Regards,
Rajapandi R

Marked as answer
LA Laurent May 17, 2021 03:17 PM UTC

Thanks for your reply. It was more visible/not visible then enable/disabled. But with the link to the API documentation I found hideItems method and it works fine.

regards,

RR Rajapandi Ravi Syncfusion Team May 18, 2021 05:35 AM UTC

Hi Laurent, 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 
Rajapandi R 




Loader.
Up arrow icon