Form Integration
The Telerik UI for ASP.NET Core Wizard provides integration with the Telerik UI for ASP.NET Core Form.
Each step of the Wizard accepts a Form() configuration method which defines the options as they are available in the Telerik UI for ASP.NET Core Form itself. Each Form defined within the Wizard configuration will have all the functionality available in the stand-alone Form component.
In order to facilitate the scenarios where Forms are integrated within the Wizard, the Telerik UI for ASP.NET Core Wizard can be initialized either from a <form> element or a <div> element. The configuration is set via the .Tag() configuration option.
Initialization as a <form> Element
When the Telerik UI for ASP.NET Core Wizard is initialized as a <form> element the Done button at the last Wizard step will act as a submit button. In this scenario, the Form DOM elements inside the Telerik UI for ASP.NET Core Wizard will be rendered as <div> elements.
@(Html.Kendo().Wizard()
.Name("wizard")
.Tag("form")
.ValidateForms(true)
.Steps(s=> {
s.Add().Content("Initial Step");
s.Add<UserViewModel>()
.Title("User Details")
.Form(form =>
{
form.FormData(Model);
form.Items(itm =>
{
itm.Add().Field(f => f.UserName);
itm.Add().Field(f => f.Email);
itm.Add().Field(f => f.Password);
});
});
s.Add<UserViewModel>()
.Title("Personal Details")
.Form(form =>
{
form.FormData(Model);
form.Items(itm =>
{
itm.Add().Field(f => f.FirstName);
itm.Add().Field(f => f.LastName);
itm.Add().Field(f => f.DateOfBirth);
});
});
s.Add().Content("Final Step");
})
)
@addTagHelper *,Kendo.Mvc
<kendo-wizard name="wizard">
<wizard-steps>
<wizard-step>
<wizard-step-content>
"Initial Step"
</wizard-step-content>
</wizard-step>
<wizard-step title="User Details">
<wizard-step-form form-data="@Model">
<form-items>
<form-item field="UserName">
</form-item>
<form-item field="Email">
</form-item>
<form-item field="Password">
</form-item>
</form-items>
</wizard-step-form>
</wizard-step>
<wizard-step title="Personal Details">
<wizard-step-form form-data="Model">
<validatable validate-on-blur="true"
validation-summary="false" />
<form-items>
<form-item field="FirstName">
</form-item>
<form-item field="LastName">
</form-item>
<form-item field="DateOfBirth">
</form-item>
</form-items>
</wizard-step-form>
</wizard-step>
<wizard-step>
<wizard-step-content>
"Final Step"
</wizard-step-content>
</wizard-step>
</wizard-steps>
</kendo-wizard>
Initialization as a <div> Element
When the Telerik UI for ASP.NET Core Wizard is initialized as a <div> element any forms initialized via the Wizard configuration option will behave as regular forms. If the Wizard contains multiple forms as part of its steps content and the requirement is to submit them separately a Submit button must be defined via the Form ButtonsTemplate configuration option. It is advisable to handle the Form submit event and submit the form data via Ajax as otherwise the page will reload and the Wizard will return in its initial state.
@(Html.Kendo().Wizard()
.Name("wizard")
.Tag("div")
.ValidateForms(true)
.Steps(s=> {
s.Add().Content("Initial Step");
s.Add<UserViewModel>()
.Title("User Details")
.Form(form =>
{
form.FormData(Model);
form.Items(itm =>
{
itm.Add().Field(f => f.UserName);
itm.Add().Field(f => f.Email);
itm.Add().Field(f => f.Password);
});
form.ButtonsTemplate("<input type=\"submit\" />");
form.Events(ev => ev.Submit("onSubmit"));
});
s.Add<UserViewModel>()
.Title("Personal Details")
.Form(form =>
{
form.FormData(Model);
form.Items(itm =>
{
itm.Add().Field(f => f.FirstName);
itm.Add().Field(f => f.LastName);
itm.Add().Field(f => f.DateOfBirth);
});
form.ButtonsTemplate("<input type=\"submit\" />");
form.Events(ev => ev.Submit("onSubmit"));
});
s.Add().Content("Final Step");
})
)
@addTagHelper *,Kendo.Mvc
<kendo-wizard name="wizard">
<wizard-steps>
<wizard-step>
<wizard-step-content>
"Initial Step"
</wizard-step-content>
</wizard-step>
<wizard-step title="User Details">
<wizard-step-form form-data="@Model"
buttons-template="<input type='submit' />"
on-submit="onSubmit">
<form-items>
<form-item field="UserName">
</form-item>
<form-item field="Email">
</form-item>
<form-item field="Password">
</form-item>
</form-items>
</wizard-step-form>
</wizard-step>
<wizard-step title="Personal Details">
<wizard-step-form form-data="@Model"
buttons-template="<input type='submit' />"
on-submit="onSubmit">
<validatable validate-on-blur="true"
validation-summary="false" />
<form-items>
<form-item field="FirstName">
</form-item>
<form-item field="LastName">
</form-item>
<form-item field="DateOfBirth">
</form-item>
</form-items>
</wizard-step-form>
</wizard-step>
<wizard-step>
<wizard-step-content>
"Final Step"
</wizard-step-content>
</wizard-step>
</wizard-steps>
</kendo-wizard>
<script>
function onSubmit(event){
event.preventDefault();
//handle data submission
}
</script>
Separate Forms
Forms can be defined with the Wizard configuration (the build-in Form integration explained above), could be initialized directly as content of any step of the Wizard, or could be loaded as a content via Ajax call to a remote end-point. When Form is separately initialized (without using the Wizard configuration) or loaded as a remote content on any of the Wizard steps, there will be no built-in connection between the Wizard and the Form. The Form will act as a separate component. For further details refer to the Content section.