PreventDefault on Click event doesn't prevent url opening

[Musashi]

I have a ToolBar with a Click handler defined, and some items, kind of like below

Html.Inteum().ToolBar().Name(tab.Name).Events(events => events.Click("TabItem_Click"))
.Items(items =>
{
    items.Add().Type(CommandType.SplitButton).Text("blahblah").Url("someURL");
}

function TabItem_Click(e) {
    e.preventDefault();
    LoadPageAsync(e.target.data().button.options.url);
    return false;
}

What I'm hoping to do is to prevent navigation to a new page when you click on a button, and instead load that target up asynchrnously. But the navigation is never prevented. How do I keep the navigation from happening?

[Ivan Danchev]

Hello Musashi,

I replied to your inquiry in the thread with the same subject you started in the ticketing system. If you have more questions on the subject I suggest we continue the discussion in it.

Regards,
Ivan Danchev
Telerik

[Grahame]

I am also in need of a solution for this, we are using custom JS to stop the link from loading ( like the way the javascript confirm works). To do this we return false to stop the user from loading the link, this however does not work in Kendo UI v2016.1.226 and I did not see it addressed in the patch notes.

1.@(Html.Kendo()
2.          .ToolBar()
3.          .Name("toolBar")
4.          .Items(items =>
5.          { items.Add().Type(CommandType.Button).SpriteCssClass("fa fa-trash fa-lg").Url(Url.Action("Delete", "Role", new { id = 4 })).HtmlAttributes(new { style = "border: none" }).Click("function(e) {return false; }");
6.          })
7.          .HtmlAttributes(new { style = "padding-left:5px;" })
8.    )

 

[Musashi]

As Ivan had responded in my ticket:

You can set an ID to the button, for example "MySplitButton", attach a click handler using the ID as selector and return false as shown below:
.Id("MySplitButton")
$(document).ready(function () {
    $("#MySplitButton").click(function () {
        return false;
    })
});

[Grahame]

Hmm that should indeed work, however is not that still a workaround?

Is there a way to use my same click function code without hard-coding the control ID in the js function().

Is this a bug or intended? My other solution was to add the onClick into the .HtmlAttributes() however there is a bug that does not allow single-quotes in the string of the .HtmlAttributes() so there is no way to pass string value to the onclick function.

[Grahame]

Also I would like to thank you for such a quick reply! 

[Musashi]

What I ended up doing, as I had multiple buttons with no explicit IDs, I applied a class and hooking up a delegate on the ready event:

$(function () {
    setTimeout(function () {
        $("a.TabItemButton").on("click", function (e) {
            //  TODO: won't close popup. popup is supposedly not visible. Bug I think
            $(e.target).data("button").toolbar.popup.close();
            LoadPageAsync($(e.target).data("button").options.url);
            return false;
        });
    }, 0);
});

 

[Grahame]

Because of our project structured we use the same function on toolbar buttons and generic HTML controls. So this is not optimal for our solution but we will duplicate the function to account for the tool bars.

Thank you for your elegant solution, it will help us get off the ground until the Kendo-MVC-toolbar-button supports 'PreventDefault'. :)