Add Custom Reset Button to Form
Environment
Product | Progress® Kendo UI® Form for jQuery |
Description
How can I add a custom button to reset the inital data loaded in the From?
Solution
Configure a buttonsTemplate
and add the html for the reset button. On click of the custom reset button, get a reference to the Form. Use the setOptions method to set the formData of the Form to the initial data.
<form id="myForm"></form>
<script>
function custom(){
var form = $("#myForm").data('kendoForm');
var initial = form.options.formData;
form.setOptions({
formData: {
ID: initial.ID,
Name: initial.Name,
Address: initial.Address
}
});
}
$(document).ready(function(){
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "Ivan",
Address: "Sofia"
},
buttonsTemplate:'<div class="k-form-buttons">'+
'<button class="k-button k-primary k-form-submit" type="submit">Submit</button>'+
'<button class="k-button k-form-clear" type="button">Clear</button>'+
'<button id="btn" onclick="custom()" class="k-button" type="button">Custom Reset button</button>'+
'</div>',
submit: function(e) {
e.preventDefault();
}
});
})
</script>