This is a migrated thread and some comments may be shown as answers.

prevent postback

4 Answers 263 Views
Button
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 08 Feb 2017, 10:21 PM
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?

4 Answers, 1 is accepted

Sort by
0
Alex
Top achievements
Rank 1
answered on 08 Feb 2017, 10:48 PM
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.
0
Ivan Danchev
Telerik team
answered on 09 Feb 2017, 08:26 AM
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.
0
Alex
Top achievements
Rank 1
answered on 09 Feb 2017, 04:00 PM

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"

 

 

0
Ivan Danchev
Telerik team
answered on 13 Feb 2017, 12:21 PM
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.
Tags
Button
Asked by
Alex
Top achievements
Rank 1
Answers by
Alex
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or