[Solved] Show Telerik Menu from within Grid

[Stuart]

I've a Telerik Grid populated with Ajax binding, within the grid I want to add a Telerik Menu within each cell in one of the columns. I've added the menu but the menu items are not visible when the menu is clicked. From another couple of posts I understand that I need to set the overflow and z-index CSS properties appropriately on the menu, however I am still unable to display the menu items.

The code is as follows;

@(Html
.Telerik()
.Grid<Person>()
.Name("peopleGrid")
.Columns(columns =>
    {
        columns.Template(t => { }).ClientTemplate(
            Html
            .Telerik()
            .Menu()
            .Name("themenu")
            .HtmlAttributes(new { title = "Click to see available options.", style = "z-index : 200000; overflow: visible;" })
            .Items(menu => menu.Add().Text("GO").Items(sub =>
                {
                    sub.Add().Text("Do one thing");
                    sub.Add().Text("Do another thing.");
                }))
                .Orientation(MenuOrientation.Vertical)
                .HighlightPath(true)
                .OpenOnClick(false)
                .ToHtmlString()
            ).Width(125);
            columns.Template(t => { }).ClientTemplate("<a href='#' class='t-button'>GO</a>");
            columns.Bound(t => t.Birthday);
            columns.Bound(t => t.FirstName);
            columns.Bound(t => t.Surname);
        })
.DataBinding(binding => binding.Ajax().Select("PeopleAjax", "Home"))
.Selectable())

What changes do I need to make for the menu to display correctly? - Note: Sample project attached.

[Daniel]

Hi Stuart,

In order to for a Menu inside a cell of a Grid to be initialized and the items to be visible you should:

• Generate a unique name for the Menu in each row so that the initialization scripts can be executed on the correct element.
• Override the overflow:hidden style on the table cell which is used by default.

For example:

columns.Template(t => { }).ClientTemplate(
    Html.Telerik().Menu()
    .Name("themenu<#= PersonId #>")
    .Items(menu => menu.Add().Text("GO").Items(sub =>
        {
            sub.Add().Text("Do one thing");
            sub.Add().Text("Do another thing.");
        }))
        .Orientation(MenuOrientation.Vertical)
        .HighlightPath(true)
        .OpenOnClick(false)
        .ToHtmlString()
    )
    .HtmlAttributes(new {style="overflow:visible;" })
    .Width(125);

Regards,
Daniel
the Telerik team