How do I add intermediate buttons within a form, in order to hide/show Item Groups?
1 Answer 8 Views
Antony
Top achievements
Rank 1
Iron
Antony asked on 14 Jul 2021, 04:43 AM

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?

1 Answer, 1 is accepted

Sort by
0
Accepted
Antony
Top achievements
Rank 1
Iron
answered on 14 Jul 2021, 12:12 PM

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
Telerik team
commented on 16 Jul 2021, 04:42 PM

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.

Tags
Form
Asked by
Antony
Top achievements
Rank 1
Iron
Answers by
Antony
Top achievements
Rank 1
Iron
Share this question
or