New to Telerik UI for ASP.NET Core? Download free 30-day trial

Integrate a Cancel Button within the Form

Environment

Product 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);
        })
   })

See Also

In this article