Integrating a Cancel Button within the Form
Environment
| Product | Telerik UI for ASP.NET MVC Form |
| Progress Telerik UI for ASP.NET MVC version | Created with the 2022.2.621 version |
Description
How can I integrate a Cancel button within the Telerik UI for ASP.NET MVC Form?
Solution
To achieve the desired scenario:
- Provide initial values for the Form through the
.FormData()configuration option. - Configure the Form buttons through the
.ButtonTemplateId()configuration option and provide anidfor the Cancel button. - Attach a click handler for the Cancel button.
- Within the handler, get the
formData, set theformfields programmatically, and make an Ajax request to the desired end-point.
@model FormPostModel.Models.Team
@(Html.Kendo().Form<FormPostModel.Models.Team>()
.Name("formExample")
.HtmlAttributes(new { action = Url.Action("Index","Home"), method = "POST" })
.ButtonsTemplateId("buttonsTemplate")
.Items(items =>
{
items.AddGroup()
.Label("Add/Edit Teams")
.Items(i =>
{
i.Add()
.Field(f => f.TeamName)
.Label(l => l.Text("Team Name:")
);
i.Add()
.Field(f=>f.Countries)
.Editor(e=>e.CheckBoxGroup()
.Items(items=>{
items.Add().Label("Bulgaria").Value("1");
items.Add().Label("England").Value("2");
items.Add().Label("France").Value("3");
})
);
i.Add()
.Field(f => f.Description)
.Editor(e=> e.TextBox())
.Label(l => l.Text("Description Name:"));
});
}).FormData(Model)
)
<script id="buttonsTemplate" type="text/x-kendo-template">
<div class="myButtonsContainer">
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-form-submit" type="submit">
<span class="k-button-text">My Submit Submit</span>
</button>
<button id="cancelBtn" type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
<span class="k-button-text"> My Cancel Button</span>
</button>
</div>
</script>
$(document).ready(function(){
$("#cancelBtn").on("click",function(e){
var form=$("#formExample").data("kendoForm");
var formData=form.options.formData;
form.editable.options.model.set("TeamName", formData.TeamName);
form.editable.options.model.set("Description", formData.Description);
form.editable.options.model.set("Countries", formData.Countries);
})
})