Getting Started with the Wizard
This guide demonstrates how to get up and running with the Kendo UI for jQuery Wizard.
After the completion of this guide, you will be able to achieve the following end result:
<div id="wizard"></div>
<script>
$("#wizard").kendoWizard({
steps: [
{ title: "Initial step"},
{ title: "Second step"},
{ title: "Final step"},
]
});
</script>
1. Create an Empty Div Element
First, create an empty <div> element on the page that will serve as the main container of the Wizard component.
<div id="wizard"></div>
2. Initialize the Wizard
In this step, you will initialize the Wizard from the empty <div> element. All settings of the Wizard will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
<div id="wizard"></div>
<script>
// Target the div element by using jQuery and then call the kendoWizard() method.
$("#wizard").kendoWizard();
</script>
3. Add the Steps of the Wizard
The Wizard provides different ways to display its data. In this guide, you will be using the steps configuration which allows you to use an array to display the steps. For further information about the Wizard's content, check the Content Article.
<div id="wizard"></div>
<script>
$("#wizard").kendoWizard({
steps: [
{ title: "Initial step"},
{ title: "Second step"},
{ title: "Final step"},
]
});
</script>