how to hide context menu item(s)

[Daochuen]

Hi All,

I have a grid inside a partialview of index view in a MVC project. I add a context menu to the grid. This menu has 4 items.  Which item(s) will show up depends on how many rows of grid are selected. I assign id to each menu item and tried to use hide() and show() to show certain menu item(s) but it doesn't work.  Anyone know how to do that?

Thanks.

[Tsvetomir]

Hello,

There are two approaches which might be used to conditionally hide or disable items of the context menu. Both of them have to be applied in the open event:

.Events(ev=>ev.Open("onOpen"))

1. Access any of the items by index and use the hide() method based on the amount selected rows of the grid:

function onOpen(e){
    var grid = $("#grid").getKendoGrid();
    var selectedItemsCount = grid.select().length;

    var firstItem = $("ul.k-context-menu li[role='menuitem']:eq(0)");

    if(selectedItemsCount < 3) {
        firstItem.hide();
    } else {
        firstItem.show();
    }
}

2. Use the context menu API and disable some of the items based on an ID.

.Items(items =>
{
    items.Add().Text("Reply").HtmlAttributes(new { @id = "firstItem" });

And the corresponding JavaScript:

function onOpen(e){
    var grid = $("#grid").getKendoGrid();
    var selectedItemsCount = grid.select().length;

    var contextMenu = $("#menu").data("kendoContextMenu");

    if (selectedItemsCount < 3) {
        contextMenu.enable("#firstItem", false);
    } else {
        contextMenu.enable("#firstItem", true);
    }
}

Try the suggestions above and let me know if you encounter any issues.


Kind regards,
Tsvetomir
Progress Telerik

[Daochuen]

Thanks,  The solutions you suggested worked great!