Form Buttons Return to Index

[Richard]

Afternoon,

I have a form which uses

        .ButtonsTemplateId("saveTemplate")

<script type="text/x-kendo-template" id="saveTemplate">
    <button class="k-button k-primary">Save Changes</button>
             &nbsp;&nbsp;
    <button type="button" class="k-button" formaction="@Url.Action("Index");">Back to List</button>
</script>

I need the second button to return to the Index without submitting the form or causing validation.

How can I achieve this?

Many thanks,

Richard

[Mihaela]

Hello Richard,

Would you remove the "type" attribute (type="button") from the button element and let me know if it navigates to the "Index" page at your end?

I have tested the example below and it works properly at my end:

 

@(Html.Kendo().Form<Model>()
  .Name("formExample")
  ...
  .ButtonsTemplateId("saveTemplate")
)

<script type="text/x-kendo-template" id="saveTemplate">
    <button class="k-button k-primary">Save Changes</button>
             &nbsp;&nbsp;
    <button class="k-button" formaction="@Url.Action("Index")">Back to List</button>
</script>

Thank you for your cooperation!

Regards, Mihaela Progress Telerik

[Richard]

Hello Mihaela,

Many thanks for your reply.

I've amended the 'Back to List' button as you suggested, but it's still triggering the validation.  Is it the way I've set up my validation - setting the required property in InputHtmlAttributes?

@(Html.Kendo().Form<Model>()

        .Name("formExample")

        .HtmlAttributes(new { action = "", method = "POST" })

        .Orientation("vertical")

        .ButtonsTemplateId("saveTemplate")

        .Validatable(v =>

        {

            v.ValidateOnBlur(true);

            v.ValidationSummary(vs => vs.Enable(true));

        })

       ...

        .Items(items =>

        {

            items.AddGroup()

                .Label("Generic")

                .Layout("grid")

                .Items(i =>

                {

                    i.Add()

                        .Field(f => f.Generictitle)

                        .Label(l => l.Text("Generic Title:"))

                        .InputHtmlAttributes(new { required = "required", validationMessage = "Title is required", style = "width: 100%;" });

                    i.Add()

                        .Field(f => f.Generictext)

                        .Label(l => l.Text("Generic Notes:"))

                        .Editor(e => e.TextArea()

                        .MaxLength(450)

                        .Rows(5)

                    )

                    .InputHtmlAttributes(new { required = "required",validationMessage = "Notes are required", style = "width: 100%;" });

                }

            );

        })

    )

<script type="text/x-kendo-template" id="saveTemplate">

    <button class="k-button k-primary">Save Changes</button>

             &nbsp;&nbsp;

    <button class="k-button" formaction="@Url.Action("Index")">Back to List</button>

</script>

Many thanks,

Richard

[Richard]

Also, I've tried setting the formnovalidate attribute:

<button class="k-button" formnovalidate formaction="@Url.Action("Index")">Back to List</button>

[Mihaela]

To ignore the form validation when the "Back to List" button is clicked, I would suggest the following approach:

•  Store a hidden element within your form:

$("#formExample").append($("<input type='hidden' id='wasCanceled' name='wasCanceled' value='False' data-skip='true'/>"));

• Handle the "click" event of the back button, disable the client-side validation, and set the value of the hidden input ("wasCanceled") to "True":

<script type="text/x-kendo-template" id="saveTemplate">
    <button class="k-button k-primary">Save Changes</button>
             &nbsp;&nbsp;
    <button class="k-button" id="backBtn">Back to List</button>
</script>

<script>
$(document).ready(function () {
        $("#backBtn").on("click", function () {
            var validatable = $("#formExample").kendoValidator().data("kendoValidator"); 
            validatable.destroy(); //remove the Kendo Validator to disable the client-side validation;
            document.getElementById('wasCanceled').value = 'True'; //update the value of the hidden input element
        });
});
</script>

• Return the appropriate View in case the "Back to List" button is clicked:

        [HttpPost]
        public ActionResult Index()
        {
            var model = Request.Form;
            if(model["wasCanceled"] == "True")
            {
                return View("Index");
            }
            ...
        }

[Richard]

Hello Mihaela,

Many thanks for your reply.

I was able to use the code you posted without much amendment and it does exactly what I want.

Many thanks for your support and advice.

Richard

[Richard]

To ignore the form validation when the "Back to List" button is clicked, I would suggest the following approach:

•  Store a hidden element within your form:

$("#formExample").append($("<input type='hidden' id='wasCanceled' name='wasCanceled' value='False' data-skip='true'/>"));

• Handle the "click" event of the back button, disable the client-side validation, and set the value of the hidden input ("wasCanceled") to "True":

<script type="text/x-kendo-template" id="saveTemplate">
    <button class="k-button k-primary">Save Changes</button>
             &nbsp;&nbsp;
    <button class="k-button" id="backBtn">Back to List</button>
</script>

<script>
$(document).ready(function () {
        $("#backBtn").on("click", function () {
            var validatable = $("#formExample").kendoValidator().data("kendoValidator"); 
            validatable.destroy(); //remove the Kendo Validator to disable the client-side validation;
            document.getElementById('wasCanceled').value = 'True'; //update the value of the hidden input element
        });
});
</script>

• Return the appropriate View in case the "Back to List" button is clicked:

        [HttpPost]
        public ActionResult Index()
        {
            var model = Request.Form;
            if(model["wasCanceled"] == "True")
            {
                return View("Index");
            }
            ...
        }