Menu embedded in grid not expanding when hovered over

6 posts, 0 answers
  1. Stuart
    Stuart avatar
    6 posts
    Member since:
    Jun 2011

    Posted 24 Jul 2012 Link to this post

    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();
            }
        }
    }
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 27 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Stuart
    Stuart avatar
    6 posts
    Member since:
    Jun 2011

    Posted 15 Nov 2012 Link to this post

    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.
  5. Marek Karbarz
    Marek Karbarz avatar
    3 posts
    Member since:
    Oct 2006

    Posted 19 Mar 2013 Link to this post

    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.
  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 20 Mar 2013 Link to this post

    Hi Marek,

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

    Greetings,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Nick
    Nick avatar
    1 posts
    Member since:
    Aug 2012

    Posted 20 Mar 2013 Link to this post

    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" });
        });
    }
Back to Top
UI for ASP.NET MVC is VS 2017 Ready