This is a migrated thread and some comments may be shown as answers.

Conditionally include menu options

1 Answer 214 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Bil asked on 27 Mar 2014, 04:32 PM
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:

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.


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 31 Mar 2014, 02:45 PM

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"));
        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))");


Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question