Integrating a Cancel Button within the Form

Environment

Product	Telerik UI for ASP.NET Core Form
Progress Telerik UI for ASP.NET Core version	Created with the 2022.2.621 version

Description

How can I integrate a Cancel button within the Telerik UI for ASP.NET Core Form?

Solution

To achieve the desired scenario:

1. Provide initial values for the Form through the .FormData() configuration option.
2. Configure the Form buttons through the .ButtonTemplateId() configuration option and provide an id for the Cancel button.
3. Attach a click handler for the Cancel button.
4. Within the handler, get the formData, set the form fields 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);
        })
   })

More ASP.NET Core Form Resources

• [ASP.NET Core Form Documentation]((/aspnet-core/html-helpers/layout/form/overview)

• ASP.NET Core Form Demos

• ASP.NET Core Form Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Form for ASP.NET Core
• Server-Side API Reference of the Form for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base