Menu embedded in grid not expanding when hovered over

[Stuart]

Maybe there's some difference in Telerik/Kendo MVC behaviour here?

I've been converting some code from the Telerik MVC components to the Kendo MVC equivalents.

I have a Kendo grid in which one of the columns has embedded a Kendo menu. However when the menu is moused over the menu does not expand, nor does it do so when the menu is clicked.

I've created two small sample projects, one showing the menu expanding on hover as expected with the Telerik components, the other project has been ported to Kendo and the menu no longer displays.

I've made only minor changes to have the code run with Kendo, including updating the menu name to use the revised template format and adding a call to ToClientTemplate when building the menu.

The projects are larger than the allowed 2MB limit so I've shared them via SugarSync.
https://www.sugarsync.com/pf/D104910_65492427_756235

Why though does the menu not display with the Kendo code?

Here's the code;
View

@using MvcMenuPopup.Models

@{

    ViewBag.Title = "People";

}

<h2>Some People</h2>

    @(Html

    .Kendo()

    .Grid<Person>()

    .Name("peopleGrid")

    .Columns(columns =>

        {

            columns.Template(t => { }).ClientTemplate(

                Html

                .Kendo()

                .Menu()

                .Name("themenu#=PersonId#")

                .Items(menu => menu.Add().Text("::").Items(sub =>

                    {

                        sub.Add().Text("Do this thing");

                        sub.Add().Text("Do that thing");

                    }))

                    .Orientation(MenuOrientation.Vertical)

                    .HighlightPath(true)

                    .OpenOnClick(false)

                    .ToClientTemplate()

                    .ToHtmlString()

                )

                .HtmlAttributes(new { @class = "navigationColumn", style = "overflow: visible;" })

                .Width(50);

             

                columns.Bound(t => t.Birthday);

                columns.Bound(t => t.FirstName);

                columns.Bound(t => t.Surname);

            })

    .DataSource(binding => binding.Ajax().Read("PeopleAjax", "Home")))

Model

namespace MvcMenuPopup.Models

{

    using System;

 

    public class Person

    {

        public long PersonId { get; set; }

 

        public DateTime Birthday { get; set; }

 

        public string FirstName { get; set; }

 

        public string Surname { get; set; }

    }

}

Action

namespace MvcMenuPopup.Controllers

{

    using System;

    using System.Linq;

    using System.Web.Mvc;

 

    using Kendo.Mvc.Extensions;

    using Kendo.Mvc.UI;

 

    using MvcMenuPopup.Models;

     

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return this.View();

        }

 

        public ActionResult About(string firstName)

        {

            return this.View((object)firstName);

        }

 

        public JsonResult PeopleAjax([DataSourceRequest]DataSourceRequest request)

        {

            DataSourceResult result = GetPeople().OrderByDescending(train => train.Birthday).ToDataSourceResult(request);

 

            return this.Json(result);

        }

 

        private static IQueryable<Person> GetPeople()

        {

            var birthdays = Enumerable.Range(1, 12).Select(month => new DateTime(1980, month, 1)).ToList();

 

            return birthdays.Select((date, index) => new Person

                {

                    PersonId = index,

                    Birthday = date,

                    FirstName = "Bill" + index,

                    Surname = "Smith" + index

                }).AsQueryable();

        }

    }

}

[Atanas Korchev]

Hi Stuart, 


Currently the Kendo grid for ASP.NET MVC does not execute any JavaScript defined in a column template. This is the reason the menus remain uninitialized. We will probably address that in a future release.

As a workaround you can manually execute the JavaScript:

function onDataBound(e) {
    // execute all script elements in the grid
    this.element.find("script").appendTo(document.body);
}

I have modified your project to make things work. Find it attached to this thread.

Regards,
Atanas Korchev
the Telerik team

[Stuart]

It looks as if JavaScript in a column template is still not executed, even in the Q3 release.
Is there any plan to get this fixed - this functionality was there in the Telerik grid?
Regards.

[Marek Karbarz]

I am also pretty disappointed that this functionality doesn't work out of the box (or the "fix" suggested here - nothing is happening).

Unfortunately Kendo has a long way to go to match the "old" Telerik controls in terms of functionality.

[Atanas Korchev]

Hi Marek,

 I've attached a running project. Did you try it?

Greetings,
Atanas Korchev
the Telerik team

[Nick]

Hi,

I had a few hundred rows in the grid, if the script was run over all rows on page load to turn all the ULs into menus there would be a performance hit, the page would hang for a couple of seconds. So it's actually a good thing the script is not run on page load.
Give that all tour menu unordered lists have an ID of 'navigationMenu_SOME_UNIQUE_NUMBER' you can turn them into menus as they are moused over with the following code.

Good luck!

// Add this in your grid config - if using MVC server wrappers
.Events(events => events.DataBound("gridDataBound"))

function gridDataBound() {
$('ul[id^="navigationMenu"]')

    .one('mouseover', function () {

        $(this).kendoMenu({ "orientation": "vertical" });

    });
}