Conditionally include menu options

2 posts, 1 answers
  1. Bil
    Bil avatar
    27 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2014 Link to this post

    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.

  2. Answer
    Daniel avatar
    2125 posts

    Posted 31 Mar 2014 Link to this post


    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.

Back to Top