Kendo menu inside a tree

[Allocate Software Internal Systems]

Context: http://jsfiddle.net/regisbsb/2kQGs/

Hi,

I'm trying to do something very simple.
It is just a menu inside a tree. 
But kendo tree gets confused on the onSelect event of the tree. It thinks it is a menu item the e.node!
Could you fix that bug please?

Please open the fiddle and firebug on console tab to see a demo.

[Allocate Software Internal Systems]

I've found the bug:

//kendo.web.js v2013.2.725
//line 42872:
 _mousedown: function(e) {
            var node = $(e.currentTarget).closest(NODE);

            this._clickTarget = node;
            this.current(node);
        },
//line 43102:
_click: function (e) {
            var that = this,
                node = $(e.target),
                contents = nodeContents(node.closest(NODE)),
                href = node.attr("href"),
                shouldNavigate;

            if (href) {
                shouldNavigate = href == "#" || href.indexOf("#" + this.element.id + "-") >= 0;
            } else {
                shouldNavigate = contents.length && !contents.children().length;
            }

            if (shouldNavigate) {
                e.preventDefault();
            }

            if (!node.hasClass(".k-state-selected") && !that._trigger(SELECT, node)) {
                that.select(node);
            }
        },

See here NODE is k-item which any of your products use, so it will fail for any cascaded controls inside a tree.
I don't have a correct "performatic" answer but you need to find a way of identifying the node
(.k-item[role=treeitem] ?) but we have to solve it some how.
If you try to use your example of the button on delete it will work because the closest item is a the tree. as soon as you put a k-item div wraper on the button you destroy the behaviour. very fragile.

[Allocate Software Internal Systems]

On kendo.web.js v2013.2.725
line 43592 the workaround is in place on the select method:

node = $(node, element).closest(NODE);

that fixes when you click on the icon for example or the checkbox of the node and allows a fake non buggy behavior.
as soon as you get something deep inside you are bad. the line above will find the inner widget and game over.
Can you change below from e.target to e.currentTarget like in the _mousedown function???????
As soon as you do that I will download the new private build on customer area.
I've checked and build v2013.2.801 is bad as well.

//43102
_click: function (e) {
            var that = this,
                node = $(e.target), //this should be e.currentTarget

               
see it fixed in the new jsfiddle:
http://jsfiddle.net/regisbsb/2kQGs/3/

It took me a lot of hours to fix that so find attached for someone that needs that in the meantime while it is not fixed.

[Alex Gyoshev]

As I wrote in the cross-posted support ticket, nesting widgets in the TreeView is currently not supported. Because modifying the treeview code or hacking around it may break future upgrades, it is advised to follow an alternative approach -- either a context menu as in this code library, or providing inline actions, like the delete buttons in the treeview templates example.

Regards,
Alex Gyoshev
Telerik

[Allocate Software Internal Systems]

Alex Gyoshev ,

See my point is that if you add a div on the template with the class k-item it breaks the control.
And the inconsistency between mousedown and click.
If you believe it is not a bug then ok but I cannot see a reason not to fix that e.target to e.currentTarget given the other method uses it.

Thanks.

[Alex Gyoshev]

> if you add a div on the template with the class k-item it breaks the control.
Yes, because nesting components inside the treeview is not supported.

> I cannot see a reason not to fix that e.target to e.currentTarget
Indeed, currentTarget is correct in that context. We have updated the method for the next internal build that is to be released later this week.

Regards,
Alex Gyoshev
Telerik