Form Buttons Return to Index

2 Answers 17 Views
Button Form
Richard
Top achievements
Rank 2
Iron
Iron
Iron
Richard asked on 22 Oct 2021, 12:25 PM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Mihaela
Telerik team
answered on 27 Oct 2021, 07:29 AM | edited on 02 Nov 2021, 03:20 PM

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

      Remote troubleshooting is now easier with Telerik Fiddler Jam. Get the full context to end-users' issues in just three steps! Start your trial here - https://www.telerik.com/fiddler-jam.
      Richard
      Top achievements
      Rank 2
      Iron
      Iron
      Iron
      commented on 27 Oct 2021, 09:00 AM

      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
      Top achievements
      Rank 2
      Iron
      Iron
      Iron
      commented on 27 Oct 2021, 09:13 AM

      Also, I've tried setting the formnovalidate attribute:

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

      Mihaela
      Telerik team
      commented on 01 Nov 2021, 07:58 AM

      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
      Top achievements
      Rank 2
      Iron
      Iron
      Iron
      commented on 02 Nov 2021, 01:14 PM

      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

      0
      Richard
      Top achievements
      Rank 2
      Iron
      Iron
      Iron
      answered on 02 Nov 2021, 01:18 PM | edited on 02 Nov 2021, 01:20 PM

      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");
                  }
                  ...
              }

      Tags
      Button Form
      Asked by
      Richard
      Top achievements
      Rank 2
      Iron
      Iron
      Iron
      Answers by
      Mihaela
      Telerik team
      Richard
      Top achievements
      Rank 2
      Iron
      Iron
      Iron
      Share this question
      or