Stepper TagHelper Overview

The Telerik UI Stepper TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI Stepper widget.

The Stepper is an intuitive UI component that visualizes progress by displaying a sequence of logical steps. The Stepper widget could also be used for navigational purposes.

• Demo page for the Stepper

Basic Configuration

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

    <kendo-stepper name="stepper">
        <steps>
            <step label="First" icon="home"></step>
            <step label="Second" selected="true"></step>
            <step label="Third"></step>
            <step label="Fourth" enabled="false"></step>
            <step label="Fifth"></step>
        </steps>
    </kendo-stepper>

Functionality and Features

• Icons
• Steps
• Appearance
• Operation modes

Events

You can subscribe to all Stepper events.

    <kendo-stepper name="stepper" on-activate="onActivate" on-select="onSelect">
        <steps>
            <step label="First" icon="home"></step>
            <step label="Second" selected="true"></step>
            <step label="Third"></step>
            <step label="Fourth" enabled="false"></step>
            <step label="Fifth"></step>
        </steps>
    </kendo-stepper>

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

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

See Also

• Basic Usage of the Stepper TagHelper for ASP.NET Core (Demo)