Treeview Context Menu sub-menu alignment

[Ollie]

Good day!

I have a context menu that is appearing when you right-click tree view nodes. Now the option in the context menu and its sub-menu is dependent with the node type.

My problem is, when I hover an option with a sub-menu, it always display the sub-menu to the left side of its parent and its being cutoff by the screen border. I tried different configuration for 'direction', 'orientation', 'popupCollision' and I can't seem to solve this issue.

In the attached file, I want to show the sub-menu on where the red rectangle is.

$('#nav_tree_menu').kendoContextMenu({
    target: "#nav_tree",
    filter: 'span.k-in',
    alignToAnchor: true,
    select: function(e) {
        // nodeData (src), item (target)
        ...
        ...
    },
    open: function(e) {
        if ($(e.item).is("li")) {
            return;
        }

        var node = $(e.target);
        var nodeData = treeView.dataItem(node);

        ...
        // this is where the options based on the node "type"

        this.setOptions({
            dataSource: options
        });
    }
});

 

Thank you!

Ollie dG.

 

[Ollie]

Also additional, on Firefox, when you hover at the option with sub-menu, you have to click it for the sub-menu to show but on Chrome, is being displayed automatic.

[Ivan Danchev]

Hello Ollie,

By setting popupCollision to false and direction to "right" you can force the ContextMenu to always open its submenus to the right even if there is not enough space for them. Here's a dojo example. If for some reason these two settings do not work as expected in your scenario, please modify the example accordingly so that it demonstrates the unexpected behavior and link it back for further review.

Regards,
Ivan Danchev
Progress Telerik

[Ivan Danchev]

I also did not notice any difference in how the submenus are opened in Chrome and Firefox, in both browsers hovering an item that contains child items opens the respective submenu. Could you check how the ContextMenu from the example I linked behaves in Firefox at your end?

Regards,
Ivan Danchev
Progress Telerik

[Ollie]

Hi Ivan,

I tried adding those two options and it still didn't fix the problem. FYI, we are still using 2017.2.504 version but I assume it will still work even if we are using an older version of kendo.

What I did next is to use the most recent version, and now I am encountering "too many recursion" error when I am doing a right click on a node. And based on trial and error, the error is not showing up when I comment this chunk of code in the open method:

this.setOptions({
     dataSource: options                    
});

Any idea why? Because sooner or later we are going to update to the most recent one.

And as for the Firefox, I noticed that when I hover an item, k-state-hover is being added to the div or li. but when I moved on to the next item, k-state hover is not being removed on the first item and not being added to the next item.

Thanks!

Ollie dG.

 

 

[Ivan Danchev]

Hi Ollie,

At my end there is no difference between version 2017.2.504 and the latest official version with regard to the ContextMenu opening behavior.

As for the exception, can you reproduce it in the dojo? Here's the previous example modified with the setOptions method uncommented. As you can see in this screencast, no exception is thrown. The k-state-hover class is also applied correctly to the currently hovered item and removed from it once another item is hovered.

Regards,
Ivan Danchev
Progress Telerik

[Ollie]

Hi Ivan,

Still no luck from my side. I tried different configurations for the context menu and still can't achieve my desired result.

I made some recordings of what is happening. 

When using the latest version I downloaded (2019.1.220), and this is on Chrome.

http://recordit.co/fvbh69fXA2

It showing an error when I try to do a right-click on a node. From my previous post, this error is not showing up when I comment the this.setOptions block. On Firefox, it is logging a "too many recursion" error.

The two recordings below are using our existing version (2017.2.504).

Chrome:

http://recordit.co/FvlUmDGnwh

Firefox:

http://recordit.co/8mO68LHeRK

You can see from both that the sub-menu is still being cut-off and not adjusting. And on the Firefox recording, you will see the difference when I hover on the menu.

 

 

 

[Ivan Danchev]

Hi Ollie,

Indeed the behavior shown in your recordings differs from the one exhibited in the example I linked. Could you modify the example accordingly so that it resembles your scenario, or if it is more convenient send us another one that demonstrates the issue?

Regards,
Ivan Danchev
Progress Telerik

[Ollie]

Hi Ivan,

Apologies for my delayed reply. Just a quick update:

For the sub-menu alignment, I finally made it to work. The cause was our UI designer had a CSS class that overrides the left position of that popup. It was added to fix UI issues in other areas of our system.

As for the Firefox issue, I still have that issue and maybe upgrading to the latest version will solve it (we already have the upgrade lined up this year), which brings me to my next problem. 

Using the latest version I have (2019.1.220), I am still encountering the same error from the recording from my last post. Any ideas how to fix this?

Thank you again for all your help.

 

Ollie dG.

 

 

 

[Ollie]

Hi Ivan,

All my problems were solved. For the js errors, I found out that the cause is our really old version of jquery. When I used the latest jQuery version, kendo 2019.1.220 works on my end.

 

Thanks a lot for your help.

 

Ollie dG.

[Ivan Danchev]

Hi Ollie,

I am glad you were able to identify an old jQuery version as the cause for the issue. Here's a section in the documentation that lists the supported jQuery versions per release.

Regards,
Ivan Danchev
Progress Telerik