I'm looking at https://demos.telerik.com/kendo-ui/menu/context-menu and have a question about this piece of code:

It clones the menu, it removes the active selection marker from any selected elements and then attaches a click event to all elements with Id = "apply".

But there are no apply elements in the code sample? And running this from the dojo with that code commented out seems to yield the same result.

Is it an example of how to handle context menus on other elements I might choose to put on that page? (but also for left-click though..?)

Hi all,

I've been trying for hours to dynamically populate a kendo sub-menu with processed database items, and have those menu items call a javascript function on click. I've read all over the internet that with jQuery, I should really be using event listeners, but that's really difficult when the kendo menu populates its menus with identical IDs and classes on all its items, and I'd have to dynamically create different numbers of event listeners based on the quantity of items in the menu, and I don't even know if that's possible. Therefore, I'm trying to populate the menu with custom div elements with ng-click data to call a function. My javascript file is separate from the HTML file, but I know they're connected properly because other places on the page interact with the javascript functions just fine. When I use ng-click in the inner div I'm inserting via json, absolutely nothing happens. The breakpoint in the called function is never hit, but I know the function works because I created a simple test element elsewhere on the page using the exact same ng-click logic, and it called and executed the function just fine. We're using transformative kendo rather than the raw HTML tags. Here's a code snippet:

//Transform the kendo menu
$("#kendoMenu").kendoMenu();
//other code populating $scope.listOfMilestone from the database, we know that works because the vis timeline generates correctly
var milestonesReadable = new Array();
for (var i = 0; i < $scope.listOfMilestones.length; i++) {
    var milestoneDate = new Date($scope.listOfMilestones[i].StartDate);
    var dateString = (milestoneDate.getMonth() + 1) + "/" + milestoneDate.getDate() + "/" + milestoneDate.getFullYear();
    milestonesReadable.push({
        text: "<div ng-click=\"navigate('" + dateString + "')\">" + $scope.listOfMilestones[i].Title + " (" + dateString + ")</div>",
        encoded: false
    });
}
$("#dropdownMilestoneList").kendoMenu({
                    dataSource: milestonesReadable
});

//way further down in the javascript:
$scope.navigate = function (dateString) {
    debugger;
    $scope.timeline.moveTo(dateString);
}

Here's the essential structure of our <ul> structure that the kendo menu uses:

<ul id="kendoMenu>
    <li>
        Customize Timeline
        <ul>
            <!--many layers of menu that we know all work correctly-->
            <li>
                Functions
                <ul>
                    <li>
                        Go to Milestone
                        <ul id="dropdownMilestoneList></ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

When that innermost ul tag is populated (which appears correctly with appropriate data), and is checked using inspect element, you can see inside each <span class="k-link"> tag that indicates a menu item, there is indeed a div element with correct ng-click data, exactly as it was in my test element that worked. However, when you click on any of these menu items, the ng-click just doesn't do anything. No function call, no error, just nothing. When I replace it with the base HTML's onclick, an error is thrown, though:

Uncaught ReferenceError: navigate is not defined
    at HTMLDivElement.onclick

I'm at a total loss. Any advice would be appreciated.

Thanks.

Hi

Just upgraded to 2019.3.917 and we have lost our ability to enable/disable menu items

here is an example of how we populate a menu datasource in javascript:

<script>
   var sa=[], var mm=[];

  sa.push({ text: '<span id=openPlan><span style="display: inline-block; width: 190px;" >Open Plan...</span><span>Ctrl+O</span></span>',  encoded: false });

  sa.push({ text: '<span id=readPlan><span style="display: inline-block; width: 190px;" >Read Plan...</span><span>Ctrl+R</span></span>',  encoded: false });
  sa.push({ text: '<span id=closePlan><span style="display: inline-block; width: 190px;" >Close Plan...</span><span>Ctrl+S</span></span>', encoded: false });

  mm.push({ text: "Main Menu", items: sa });
      $("#mainMenu").kendoMenu({
        dataSource: mm
    });

    // get a reference to the menu widget
    var menu = $("#mainMenu").data("kendoMenu");
    // disable menu item with id 
    menu.enable("#closePlan", false);
</script>

I have an example here: https://dojo.telerik.com/EMeLAdAd

If you set then library to '2019.1.115' it works and the 'Close Plan' item gets disabled, but if you set it to '2019.3.917' then it stays enabled!

If anyone could let me know what I am doing wrong here I would be grateful.

Thanks

James

Hi,

I'm wondering if there is a way to expand sub-menu items between the root items when the menu has a vertical orientation

For example for the menu below the space between products and blog would expand to accommodate the sub-menu. Would another control be better for this? 

Hello,

I use menu in toolbar as buttons with class k-icon

When i'm focus cursor on menu then icon changed to icon k-loading

Example: https://dojo.telerik.com/UXoGefaj/2

Error ocсure after update to kendo ui version 2019.2.619.

On grid right click context menu's open event, how does one get the grid row's data item:

function grid_menu_open(e) {

}