prevent postback

5 posts, 0 answers
  1. Alex
    Alex avatar
    54 posts
    Member since:
    May 2015

    Posted 08 Feb Link to this post

    Is it possible to prevent a postback from occurring when clicking the button, but still be able to to the click event to call a client-side javascript function?
  2. Alex
    Alex avatar
    54 posts
    Member since:
    May 2015

    Posted 08 Feb Link to this post

    I should also mention that I'm trying to add this button to the grid toolbar much like this example. But everytime I click the button it posts back to the server.
  3. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1301 posts

    Posted 09 Feb Link to this post

    Hello Alex,

    Could you post your Grid toolbar template's content as well as the button's click handler. Knowing your configuration will allow us to test the button's behavior and find what is causing the unexpected behavior you are facing.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Alex
    Alex avatar
    54 posts
    Member since:
    May 2015

    Posted 09 Feb in reply to Ivan Danchev Link to this post

    I have attached my view that has the toolbar template (_gridmaster). All the buttons in the template cause this issue, even with no event attached.

    _gridmaster is a partial view that sits inside a tabstrip, which is inside an Ajax.BeginForm. You can see this in teh Read.cshtml. The specific tab is called "Data Collection Steps"

     

     

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1301 posts

    Posted 13 Feb Link to this post

    Hello Alex,

    Thank you for demonstrating your scenario.
    The attached page is not runnable due to multiple missing dependencies, however we simulated your scenario (TabStrip in form and a tab loading a partial view containing a Grid with a Button in its toolbar template) and indeed clicking the button submits the page. This behavior is expected, but you can workaround it by preventing the button's click event.  If needed you can execute code prior to preventing the event with e.preventDefault as shown in the example below:
    @(Html.Kendo().Button()
        .Name("button")
        .Events(e => e.Click("onButtonClick"))
        .Content("Refresh")
        .Icon("refresh")
        .HtmlAttributes(new { @class = "btn btn-primary", title = "Refresh Grid", data_toggle = "tooltip" })
    )

    function onButtonClick(e) {
        var grid = $('#grid').data('kendoGrid');
        grid.dataSource.read();
        e.preventDefault();
    }


    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top