ASP.NET Core Stepper Overview

Telerik UI for ASP.NET Core Ninja image

The Stepper 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 Stepper TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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.

Initializing the Stepper

The following example demonstrates how to define the Stepper.

    @(Html.Kendo().Stepper()
        .Name("stepper")
    )
    <kendo-stepper name="stepper">
    </kendo-stepper>

Basic Configuration

The following example demonstrates the basic configuration for the Stepper.

    @(Html.Kendo().Stepper()
        .Name("stepper")
        .Steps(s =>
        {
            s.Add().Label("First Step");
            s.Add().Label("Second Step").Selected(true);
            s.Add().Label("Last Step").Icon("save");
        })
    )

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

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>

Functionality and Features

  • Icons—The Stepper enables you to customize the rendered icons.
  • Steps—The component provides different configuration options for its steps.
  • Appearance—The Stepper enables you to customize its final appearance.
  • Operation modes—The component provides the capability of operation modes.
  • Accessibility—The Stepper is compatible with the global accessibility requirements.

Next Steps

See Also

In this article