PreventDefault on Click event doesn't prevent url opening

8 posts, 1 answers
  1. Musashi
    Musashi avatar
    20 posts
    Member since:
    Jan 2014

    Posted 23 Jun Link to this post

    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?

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    830 posts

    Posted 27 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Grahame
    Grahame avatar
    7 posts
    Member since:
    Feb 2013

    Posted 28 Jun Link to this post

    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.    )

     

  5. Musashi
    Musashi avatar
    20 posts
    Member since:
    Jan 2014

    Posted 28 Jun in reply to Grahame Link to this post

    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;
        })
    });

  6. Grahame
    Grahame avatar
    7 posts
    Member since:
    Feb 2013

    Posted 28 Jun Link to this post

    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.
  7. Grahame
    Grahame avatar
    7 posts
    Member since:
    Feb 2013

    Posted 28 Jun Link to this post

    Also I would like to thank you for such a quick reply! 
  8. Musashi
    Musashi avatar
    20 posts
    Member since:
    Jan 2014

    Posted 28 Jun Link to this post

    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);
    });

     

  9. Grahame
    Grahame avatar
    7 posts
    Member since:
    Feb 2013

    Posted 28 Jun in reply to Musashi Link to this post

    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'. :)

Back to Top
UI for ASP.NET MVC is VS 2017 Ready