How do I add intermediate buttons within a form, in order to hide/show Item Groups?

[Antony]

I've recently discovered the Form widget, and I like how it simplifies coding/layout of the labels and fields. However, in a form you often want to step through the form, only showing subsequent fields on the basis of answers to previous fields, or just to simplify what is presented in one go.

I have found that hide/show of a Group can be achieved on response to say a switch; eg

function onIsManagerChange(e) {
       var form = $("#requestForm").getKendoForm();
       var groups = form.wrapper.find(".k-form-fieldset");
       $(groups[1]).toggle(!e.checked);
 }

But what if I just want to show the first group, and then require the user to press a Next button. Is it possible to add a button, say to the end of:

  @(Html.Kendo().Form<AccessRequest.Models.Main>()
        .Name("requestForm")
        .HtmlAttributes(new { action = "Create", method = "POST" })
        .Items(items =>
        {
            items.AddGroup()
                .Label("You and your manager's details")
                .Items(i =>
                {
                    i.Add()
                         .Field(f => f.StaffName)
                         .Label(l => l.Text("My name"));
                    i.Add()
                       .Field(f => f.ManagerName)
                       .Label(l => l.Text("Manager name"));
------ ADD BUTTON HERE
                });
            items.AddGroup() ...

OR, is there another widget I should use that would suit this functionality better?

[Antony]

I think the answer is to not use the form widget, as it is designed for simple forms only. I just need to use the standard type of MVC form with bootstrap like:

<div class="form-group">
       @Html.LabelFor(model=>model.EmpFirstName,"First Name")
       @Html.TextBoxFor(model => model.EmpFirstName, new { @class="form-control" })
</div> 
<div class="form-group">
       @Html.LabelFor(model=>model.EmpLastName,"Last Name")
       @Html.TextBoxFor(model => model.EmpLastName, new { @class = "form-control" })
</div>

[Ivan Danchev]

Hello Antony,

You can consider using the Wizard component: https://demos.telerik.com/aspnet-mvc/wizard/form

It has integration with the Form (refer to this documentation article for more details), and it can display steps which you can navigate with a "next" and "previous" buttons.