[Solved] Ajax.ActionLink Menu Item Redirects

[Jason]

Hello,

I have created a Telerik Menu and I would like to use an Ajax.ActionLink aas the menu item.  I saw another thread that shows you how to do this and I was able to add the link.  However, when the link is clicked in the menu the link redirects to the linked page instead of calling it via ajax.  I have included jquery.unobtrusive-ajax.min.js so that is not it. I have tracked it down to when the scrip registrar calls:

jQuery('#Menu').tMenu();

When that is included (which is really important) then the ajax.actionlink items no longer work properly. I am not sure what extra code gets added to the click of a link that is causing this to fail.  All other Ajax.ActionLinks in my page that are not in the Telerik Menu work perfectly.

Please let me know if there is a solution so I can use Ajax links. This would be VERY helpful!

Telerik MVC (2011.2.712) Menu, jquery-1.5.1.min.js 

Html.Telerik().Menu()
.Name("MapMenu")
.Items(items =>
{
items.Add().Text(Ajax.ActionLink("View Legend", "Legend", new AjaxOptions { UpdateTargetId = "Legend", OnSuccess = "alertMe" }).ToHtmlString()).Encoded(false);
})
.Render();

function alertMe() {
    alert("Alert!");
}

[zhang]

I got the same problem.Can somebody tell us how to use ajax menu items?

[Mahesh]

I too have the same problem.Can any one explain how to solve this problem?

[Tomas]

I have the same problem, is there any solution?

[Jon]

Same here

[Daniel]

Hi,

When using unobtrusive Ajax the jQuery live method is used to attach to the click event and the Menu will stop the event. Disabling the unobtrusive Ajax should resolve the problem as in this case the OnClick event is added directly to the link. Another option is to use the menu OnSelect event to handle the request with custom code. For example:

Html.Telerik().Menu()
.Name("MapMenu")
    .Items(items =>
    {
        items.Add().Text("View Legend").Action("Legend", "Controller");
    })
.ClientEvents(events => events.OnSelect("onSelect"))
.Render();

function onSelect(e) {
    var url = $(e.item).find("> a").attr('href');
    if (url){
        //prevent the navigation if the item url is specified
        // and make the request with jQuery
        e.preventDefault();
        $.ajax({
            url: url,
            success: function (result) {

            }
        })
    }
}

Greetings,
Daniel
the Telerik team