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>