Wizard TagHelper Overview

The Telerik UI Wizard TagHelper for ASP.NET Core is a server-side wrapper 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.

Basic Configuration

The following example demonstrates the basic configuration for the Wizard TagHelper.

    <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>

Functionality and Features

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>

See Also

In this article
Not finding the help you need? Improve this article