Wizard Overview

Telerik UI for ASP.NET Core Ninja image

The Wizard 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.

The Telerik UI Wizard TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Wizard widget.

The Wizard displays content in sequential, stepwise order. Each step of the Kendo UI Wizard has content, which can be a form or any other type of HTML content.

Initializing the Wizard

The following example demonstrates how to define the Wizard.

    @(Html.Kendo().Wizard()
        .Name("wizard")
        .Steps(s=> {
            s.Add().Content("Initial Step");
            s.Add().Content("Second Step");
            s.Add().Content("Final Step");
        })
    )

    <script>
    $(function() {
        // The Name() of the Wizard is used to get its client-side instance.
        var wizard = $("#wizard").data("kendoWizard");
    });
    </script>
    <kendo-wizard name="wizard">
        <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>

Events

You can subscribe to all Wizard events.

    <kendo-wizard name="wizard" on-activate="onActivate" on-select="onSelect">
        <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>

    <script>
        function onActivate(e) {
            console.log("Activated: " + e.step.options.label);
        }

        function onSelect(e) {
            console.log("Selected: " + e.step.options.label);
        }
    </script>

Functionality and Features

See Also

In this article