Kendo menu onSelect, how to determine the last child

Question

I'm working with the Kendo UI menu widget, and would like to only trigger the onSelect event when the last child menu item has been selected:

For example, let's say I select "Business Group" menu item below. I then want to trigger additional functions. However, if I click on "Report" I don't want to do anything.

It's probably something easy like checking for last child, but I'm still trying to figure that out.

Here's the HTML code with "kendo-menu" widget:

<div class="widget-content text-left text-info" style="float:left; border:none;">
    <div class="widget-content" text-left text-info style="float:left; border:none; width:100px;">
        <span>
            <ul kendo-menu style="display: inline-block"  k-orientation="vm.menuOrientation"
            k-rebind="vm.menuOrientation" k-on-select="vm.onSelect(kendoEvent)" k-closeOnClick="false">
                <li>
                Reports
                    <ul>
                        <li>VaR
                            <ul>
                                <li>Business Group</li>
                                <li>Stress Scenarios</li>
                                <li>IR Risk - PV10</li>
                            </ul>
                        </li>
                        <li>Ctrpty
                            <ul>
                                <li>
                                    <a href="../index.html#/dashboard">Industry</a>
                                </li>
                                <li>
                                    <a href="index.html#/dashboard?repttype='MTM'">MTM</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </span>
    </div>

In my javascript controller code, I wire up the event:

vm.onSelect = function (ev) {          
      changeReportType(ev);
    };

However it fires every time I click any of the menu items. I'd like to react on the bottom most item only.

Lars Höppner · Answer 1 · 2014-06-26T00:25:14.877

1

I think you can simply search for ul descendants:

vm.onSelect = function (e) {          
    var isLeaf = $(e.item).find("ul").length === 0;

    if (isLeaf) changeReportType(ev);
};

(demo)

edited Jun 26 '14 at 00:25

answered Jun 26 '14 at 00:18

Lars Höppner

18,252
2
45
73

score 0 · Answer 2 · answered Jul 02 '14 at 23:20

I ended up using .className.match() which worked well:

function swapGrid(e) {                    
        if (!e.item.className.match("selectable")) {
            // we have not yet reached the last child (i.e. the one with the "selectable" class).
            return;
        }
        var reptType = e.item.firstChild.textContent;    
}

score -1 · Answer 3 · edited Jun 26 '14 at 00:28

-1

I dont know how you generate your markup but you could add class selector for those which can be clicked.

JavaScript:

vm.onSelect = function (ev) {          
  var item = $(ev);
  if ( item.hasClass("selectable") ) {
      changeReportType(ev);
  } else {
      ev.preventDefault();
  }
};

Markup:

<li class="selectable">Business Group</li>

edited Jun 26 '14 at 00:28

Lars Höppner

18,252
2
45
73

answered Jun 25 '14 at 12:37

Jarno Lahtinen

1,713
17
30

great I'll try it this morning. I ended up using {if (e.item.firstChild.text == e.item.firstChild.text)}, which in this case means I have reached the bottom. But my code doesn't seem like a clean solution. – bob.mazzo Jun 25 '14 at 13:16
for some reason the item.hasClass("selectable") always evaluates to FALSE. – bob.mazzo Jun 25 '14 at 15:00

Kendo menu onSelect, how to determine the last child

3 Answers3