Conditionally include menu options

[Bil]

Hi guys,

I have a menu exposed as a column in a grid. In the old system I'm changing over to the grid I iterate over each item, inspect some value, and determine if the menu item should be included. I'm not sure how I would do this with the MVC helper because it's based on values from each row. Here's my grid/menu:

01.@(Html.Kendo().Grid<ListingViewModel>()
02.      .Name("grid")
03.      .DataSource(dataSource => dataSource
04.          .Ajax()
05.          .Read(read => read.Action("RefreshTable", "Authorizations"))
06.      )
07.      .Columns(columns =>
08.      {
09.          columns.Bound(x => x.Number)
10.              .Template(@<text></text>).HtmlAttributes(new { @class = "templateCell" })
11.              .ClientTemplate(
12.                Html.Kendo().Menu()
13.                    .Name("menu_#=Number#")
14.                    .OpenOnClick(true)
15.                    .Events(e => e.Select("selectMenu"))
16.                    .Items(its => its.Add().Text("#=Number#").Items(nested =>
17.                    {
18.                        nested.Add().Text("Edit").HtmlAttributes(new { data_number = "#=Number#" });
19.                        nested.Add().Text("Add Comment").HtmlAttributes(new { data_number = "#=Number#" });
20.                        nested.Add().Text("Cancel").HtmlAttributes(new { data_number = "#=Number#" });
21.                        nested.Add().Text("Transfer").HtmlAttributes(new { data_number = "#=Number#" });
22.                        nested.Add().Text("View Comments").HtmlAttributes(new { data_number = "#=Number#" });
23.                    }))
24.                    .ToClientTemplate().ToHtmlString());
25.          columns.Bound(x => x.Status);
26.          columns.Bound(x => x.Started);
27.          columns.Bound(x => x.Description);
28.      })
29.      .Pageable()
30.      .Sortable()
31.      .Events(events => events.DataBound("initMenus"))
32.    )

So lines 18-22 are where I build the menu. In my situation I want to include 18 and 19 if the status is a certain value and include line 20 if the description contains anything (as an example).

Even if I did this after the fact going through the entire grid using some event I really need access to the view model, or else I'll have to expose (or maybe hide) some additional fields that are used as part of the determination. For example there might be a .UserCount field that's not exposed but is needed to determine if the menu item in line 22 is added or not.

I'm looking to hide or show menu items based on the row data but could also just grey out/disable some items. In any case I'm not sure how to do this with my model and it seems like the only way to do something like this is to interrogate the HTML after the grid is built.

Hopefully that explains what I'm looking to do and what I'm working with.

Thanks.

[Daniel]

Hello,

You could either dynamically add or remove the needed items with the Menu API after initializing the menu in the dataBound event. The item for the corresponding row can be found with the Grid dataItem method e.g.

function dataBound(e) {
    var grid = this;
    $(".templateCell").each(function () {
        var cell = $(this),
            item = grid.dataItem(cell.closest("tr"));

        eval(cell.children("script").last().html());

        var menu = $("#menu_" + item.Number).data("kendoMenu");
        if (item.Status !== Value) {
            menu.remove(".k-item:has(>.k-link:contains(Edit)),.k-item:has(>.k-link:contains(Add Comment))");
        }
    });
}

Regards,
Daniel
Telerik