New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Getting Started with the Wizard

This tutorial explains how to set up a basic Telerik UI for ASP.NET MVC Wizard and highlights the major steps in the configuration of the component.

You will initialize a Wizard component with several steps and integrate a Form in one of the steps. Next, you will handle the Wizard events and submit the form data to the server.

Sample Telerik UI for ASP.NET MVC Wizard

Prerequisites

To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET MVC components:

1. Prepare the CSHTML File

The first step is to add the required directives at the top of the .cshtml document:

  • To use the Telerik UI for ASP.NET MVC HtmlHelpers:

    @using Kendo.Mvc.UI
    

Optionally, you can structure the View content by adding the desired HTML elements like headings, divs, paragraphs, and others.

    @using Kendo.Mvc.UI

    <h4>Registration progress with Wizard</h4>
    <div>

    </div>

2. Initialize the Wizard

Use the Wizard HtmlHelper to add the component to a page:

  • The Name() configuration method is mandatory as its value is used for the id and the name attributes of the Wizard element.
  • The Tag() property determines the HTML element from which the Wizard will be initialized. Set either a form or div element. When a Wizard step contains a Form component and the Wizard is initialized as a <form> element, the Done button in the last step will act as a submit button.
  • The Steps() configuration specifies the desired steps and their content.
  • The Buttons() property of a Wizard's step determines the Next, Previous, and Done buttons.
@using Kendo.Mvc.UI

    @(Html.Kendo().Wizard()
        .Name("wizard")
        .Tag("form")
        .Steps(step =>
        {
             step.Add()
                .Title("Welcome")
                .Content("<h3>Welcome to the registration for our new event!</h3>Please select 'Next' to proceed.")
                .Buttons(b =>
                {
                    b.Next();
                });

            step.Add<UserViewModel>()
                .Title("Registration")
                .Form(...) //the Form integration is implemented in the next step
                .Buttons(b =>
                {
                    b.Previous();
                    b.Next();
                });

            step.Add()
                .Title("Finish")
                .Content("<div style=\"text-align:center\"><h3>Thank you! Click 'Done' to submit your registration.</h3</div>")
                .Buttons(b =>
                {
                    b.Previous();
                    b.Done();
                });
        })
    )

3. Configure the Form Integration

The next step is to integrate a Form component inside the Wizard. The Form() configuration method defines the options as they are available in the Telerik UI for ASP.NET MVC Form itself. Each Form defined within the Wizard configuration will have all the functionality available in the stand-alone Form component.

When setting up the step that will display the form, specify the Model name in the Add method of the step.

@using Kendo.Mvc.UI

    @(Html.Kendo().Wizard()
        .Name("wizard")
        .Tag("form")
        .Steps(step =>
        {
            ...
            step.Add<UserViewModel>()
                .Title("Registration")
                .Form(f => f
                    .Validatable(v =>
                    {
                        v.ValidateOnBlur(true);
                        v.ValidationSummary(vs => vs.Enable(false));
                    })
                    .Items(items =>
                    {
                        items.Add().Field(field => field.FirstName).Label(label => label.Text("First name:"));
                        items.Add().Field(field => field.LastName).Label(label => label.Text("Last name:"));
                        items.Add().Field(field => field.Phone).Label(label => label.Text("Phone:"));
                        items.Add().Field(field => field.DateOfBirth).Label(label => label.Text("DateOfBirth:").Optional(true))
                        .Editor(editor => editor.DatePicker());
                    })
                )
                .Buttons(b =>
                {
                    b.Previous();
                    b.Next();
                });
            ...
        })
    )
public class UserViewModel
{
    public string FirstName { get; set; }

    public string LastName { get; set; }

    public string Phone { get; set; }

    public DateTime DateOfBirth { get; set; }
}

4. Handle the Wizard Events

The Wizard exposes various events that you can handle and further customize the functionality of the component. In this tutorial, you will use the Done() event to submit the form data to the server.

@using Kendo.Mvc.UI

    @(Html.Kendo().Wizard()
        .Name("wizard")
        .Events(events => events.Done("onDone"))
        .Tag("form")
        .Steps(step =>
        {
             step.Add()
                .Title("Welcome")
                .Content("<h3>Welcome to the registration for our new event!</h3>Please select 'Next' to proceed.")
                .Buttons(b =>
                {
                    b.Next();
                });

            step.Add<UserViewModel>()
                .Title("Registration")
                .Form(f => f
                    .Validatable(v =>
                    {
                        v.ValidateOnBlur(true);
                        v.ValidationSummary(vs => vs.Enable(false));
                    })
                    .Items(items =>
                    {
                        items.Add().Field(field => field.FirstName).Label(label => label.Text("First name:"));
                        items.Add().Field(field => field.LastName).Label(label => label.Text("Last name:"));
                        items.Add().Field(field => field.Phone).Label(label => label.Text("Phone:"));
                        items.Add().Field(field => field.DateOfBirth).Label(label => label.Text("DateOfBirth:").Optional(true))
                        .Editor(editor => editor.DatePicker());
                    })
                )
                .Buttons(b =>
                {
                    b.Previous();
                    b.Next();
                });

            step.Add()
                .Title("Finish")
                .Content("<div style=\"text-align:center\"><h3>Thank you! Click 'Done' to submit your registration.</h3</div>")
                .Buttons(b =>
                {
                    b.Previous();
                    b.Done();
                });
        })
    )

    <script>
        function onDone(e) {
            //Prevent the default event action
            e.originalEvent.preventDefault(); 

            //Select the Wizard element
            let form = $("#wizard"); 
            //Initialize an AJAX request to the server
            $.ajax({
                type: 'POST',
                url: "@Url.Action("SubmitRegistration", "Home")",
                data: form.serialize(),
                success: function (data) {
                    alert("Thank you for registering!");
                },
                error: function (data) {
                    alert("Please try again. Something went wrong.");
                }
            });
        }
    </script>
    public IActionResult SubmitRegistration(UserViewModel user)
    {
        //Receive and save the data
        ...
        return Json(new { Success = "Form Posted Successfully" });
    }

5. (Optional) Reference Existing Wizard Instances

You can reference the Wizard instances that you have created and build on top of their existing configuration:

  1. Use the value of the Name() option of the component to establish a reference.

        <script>
            $(document).ready(function() {
                var wizardReference = $("#wizard").data("kendoWizard"); // wizardReference is a reference to the existing Wizard instance of the helper.
            });
        </script>
    
  2. Use the Wizard client-side API to control the behavior of the control. In this example, you will use the select method to select the second step (index 1).

        <script>
            $(document).ready(function() {
                var wizardReference = $("#wizard").data("kendoWizard");
                wizardReference.select(1);
            });
        </script>
    

Next Steps

See Also

In this article