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

Layout

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

By default the Telerik UI for ASP.NET Core 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.

    @(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);
                    });
                });
        })
    )
    <kendo-wizard name="wizard" content-position="WizardContentPosition.Right">
        <wizard-steps>
            <wizard-step title="Initial step">
                <wizard-step-content>
                    <h1>Initial step content</h1>
                </wizard-step-content>
            </wizard-step>
            <wizard-step title="Second step">
                <wizard-step-content>
                    <h1>Second step content</h1>
                </wizard-step-content>
            </wizard-step>
            <wizard-step title="Final step">
                <wizard-step-content>
                    <h1>Final step content</h1>
                </wizard-step-content>
            </wizard-step>
        </wizard-steps>
    </kendo-wizard>

See Also

In this article