ContextMenu in Partial View

[Mark]

Is there a recommended way of handling a ContextMenu in a Partial View?

I have a partial view for each tab in a TabStrip (loaded via LoadContentFrom).

Each time the partial view is loaded, the ContextMenu element (<ul>) is moved to the bottom of the page within a div with class "k-animation-container". The menu behaves correctly on first load (items can be hidden successfully). On subsequent loads, the whole menu is displayed. This is presumably because of the duplicate <ul> and <li>s with duplicate ids.

Is this an incorrect usage?  Should I be destroying the widget each time (like in the example with the "Apply" dropdown to change orientation).

 

[Dimiter Madjarov]

Hello Mark,

The current behavior is indeed expected if the same context menu is initialized multiple times with the same ids. If this is the case, I would recommend to not initialize it in the partial view, that is loaded multiple times, but outside of it and only once for the current page, in which it is used.

Regards,
Dimiter Madjarov
Telerik

[Mark]

Thanks Dimiter, I suspected as much.

It turns out that 2 of my tabs use identical context menus, so I thought I could consolidate them and initialize in the main page as you suggested. I then tried to change the target of the menu within each partial view, like so

 

var menu = $("#MainContextMenu").data("kendoContextMenu");
        if (menu) {
            menu.setOptions({ target: "#Grid1" });
            alert(menu.options.target);
        }

However, this only seems to work for one of the grids. The alert shows the expected target in each view but only one shows a context menu.

Is this an acceptable way of switching the target of a context menu? Obviously, There may be some other error in the page that I haven't tracked down yet, but I just wondered if it was valid to switch targets post-initialization.

 

 

 

 

[Mark]

Ignore that last post. It turns out that my grids needed different filters to work properly.

I've gone with:

menu.setOptions({ target: gridID, filter: gridfilter });

and it's all hunky-dory.

 

[Dimiter Madjarov]

Hello Mark,

Thank you for the update.

Regards,
Dimiter Madjarov
Telerik