Layout

Updated on Dec 10, 2025

The Telerik UI for ASP.NET MVC Wizard supports configuration of its layout.

By default the Telerik UI for ASP.NET MVC Wizard is rendered with a Stepper in a horizontal orientation above the content of the Wizard. The layout could be configured via the ContentPosition configuration option. The available options allow you to display a vertical Stepper on the left or right side of the Wizard step content.

The following example demonstrates how to initialize a Wizard with a vertical Stepper and content rendered on the right side of the Stepper.

Razor

    @(Html.Kendo().Wizard()
        .Name("wizard")
        .ContentPosition(WizardContentPosition.Right)
        .Steps(s=> {
            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);
                    });
                });
        })
    )

See Also

• Basic Usage of the Wizard HtmlHelper for ASP.NET MVC (Demo)