Telerik UI for ASP.NET Core Wizard Overview
- EXAMPLE
- VIEW SOURCE
-
Change Theme
defaultDefault Theme
- Main
- Main Dark
- Nordic
- Ocean Blue
- Ocean Blue A11Y
- Purple
- Turquoise
Bootstrap Theme- Main
- Bootstrap 3
- Bootstrap 3 Dark
- Main Dark
- Nordic
- Turquoise
- Turquoise Dark
- Urban
- Vintage
Material Theme- Main
- Arctic
- Lime Dark
- Main Dark
- Nova
Classic Theme- Main
- Green
- Green Dark
- Lavender
- Lavender Dark
- Main Dark
- Metro
- Metro Dark
- Moonlight
- Opal
- Opal Dark
- Silver
- Silver Dark
- Uniform
Fluent Theme- Main
Also available for:
CLIENT-SIDE API HTML HELPER APIThe Wizard component is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Description
The Telerik UI for ASP.NET Core Wizard lets you easily create multi-step processes and guide step-by-step users in applications.
In this demo, you can see the implementation of a simple registration process using the Wizard component, that requests user input in detail in three steps: Registration Info, Personal, and Payment Details. Breaking up a process into stages will simplify user input tasks so that they will need to manage just one form at a time. At each step, you have a pre-configured built-in validation of the input data and a progress indicator showing the number of steps left towards achieving their final goal for the process.
Key Features of Wizard component:
- Built-in Validation (If configured)
- Integration with the Form component
- Loading content using AJAX
- Configuring the position of the component's stepper
The Wizard component can be initialized both from a form and div DOM elements. By default, the Wizard is initialized from a div element.
To initialize the Wizard from a form element, the .Tag(“form”) configuration has to be used. If the Wizard is initialized with a Tag(“form”) configuration if the Wizard contains form definitions, the forms inside the component will be initialized from a div element. In this scenario, the ‘novalidate’ attribute should be added to the form element from which the Wizard is initialized. This can be implemented as follows:
@(Html.Kendo().Wizard()
.Name("wizard")
.Events(ev => ev.Done("onDone"))
.Tag("form")
.HtmlAttributes(new { @novalidate ="" })
.Steps(s =>
{
……………………
})
The ‘novalidate’ attribute is needed to prevent the duplication of the built-in form validation and the default browser validation. If a form inside the Wizard is not validated using the component’s configuration, there is no need to add the ‘novalidate’ attribute.
You can find additional information on how to use the UI for ASP.NET Core Wizard component in this section of the product documentation. here you can see the API provided by the component.