New to Kendo UI for jQuery? Start a free 30-day trial

Steps

configuration

Array of steps to be rendered in the Wizard.

steps

Array

<div id="wizard"></div>
<script>
$("#wizard").kendoWizard({
    steps: [
        {
            title: "Personal Information",
            content: "<div>Enter your personal details</div>",
            icon: "user"
        },
        {
            title: "Contact Information", 
            content: "<div>Enter your contact details</div>",
            icon: "email"
        },
        {
            title: "Review",
            content: "<div>Review your information</div>",
            icon: "check"
        }
    ]
});
</script>

Allows configuration of the buttons to be rendered on each step. If the array contains strings, those values will be taken as Buttons names. If the array contains objects, those will be used when initializing the actual Button instances on each step.

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "Initial step",
            buttons: ["next", "custom"]
        },
        "Second step",
        "Third step"
        ]
    });
</script>

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "Initial step",
            buttons: [{
                name: "next"
            }, {
                name: "custom",
                click: function() {
                    alert("Custom clicked");
                }
            }]
        },
        "Second step",
        "Third step"
        ]
    });
</script>

steps.className

String

Specifies a custom class that will be set on the step container element.

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "Initial step",
            className: "custom"
        },
        "Second step",
        "Third step"
        ]
    });
</script>

steps.content

String

Specifies the HTML string content to be rendered in the step.

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "Initial step",
            content: "<h3>HTML content</h3><p>This is a harcoded HTML content for this step.</p>"
        },
        "Second step",
        "Third step"
        ]
    });
</script>

steps.contentId

String

Specifies the id of a DOM element, which content to be used as a content of the current step.

<div id="wizard"></div>

<script id="step" type="text/kendo-template">
    <h3>HTML content</h3>
    <p>This is a harcoded HTML content for this step.</p>
</script>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "Initial step",
            contentId: "step"
        },
        "Second step",
        "Third step"
        ]
    });
</script>

steps.contentUrl

String

Specifies an endpoint which the step content should be loaded from.

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "Initial step",
            contentUrl: "https://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html"
        },
        "Second step",
        "Third step"
        ]
    });
</script>

steps.enabled

Boolean

Specifies whether the step is enabled or not.

Default: true

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "Initial step"
        }, {
            title: "Second step",
            enabled: false
        }]
    });
</script>

steps.form

Object

Defines the Form widget configuration, which will populate the Wizard step content.

<div id="wizard"></div>
<script>
$("#wizard").kendoWizard({
    steps: [
        {
            title: "Personal Information",
            form: {
                formData: {
                    firstName: "",
                    lastName: "",
                    email: ""
                },
                items: [
                    { field: "firstName", label: "First Name:", validation: { required: true } },
                    { field: "lastName", label: "Last Name:", validation: { required: true } },
                    { field: "email", label: "Email:", validation: { required: true, email: true } }
                ]
            }
        },
        {
            title: "Contact Information",
            form: {
                formData: {
                    phone: "",
                    address: ""
                },
                items: [
                    { field: "phone", label: "Phone:", validation: { required: true } },
                    { field: "address", label: "Address:", validation: { required: true } }
                ]
            }
        }
    ]
});
</script>

steps.icon

String

Defines a name of an existing icon in the Kendo UI theme sprite. The icon will be displayed in the Stepper step element. For a list of available icon names, please refer to the Web Font Icons article.

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "Initial step",
            content: "Step 1 Content"
        }, {
            title: "Second step",
            content: "Step 2 Content",
            icon: "cancel"
        },{
            title: "Third step",
            content: "Step 3 Content"
        }]
    });
</script>

steps.iconTemplate

String|Function

The template used to render the icon in the Stepper step.

The fields which can be used in the template are:

title String - the title set on the step
label String - same as title - the title set on the step
icon String - the icon specified for this step (if any)
enabled Boolean - indicates whether the step is enabled (true) or disabled (false)
selected Boolean - indicates whether the step is selected
previous Boolean - indicates whether the step is before the currently selected or not
index Number - a zero-based index of the current step
isFirstStep Boolean - indicates whether the step is the initial one in the Stepper
isLastStep Boolean - indicates whether the step is the last one in the Stepper
indicatorVisible Boolean - indicates whether the indicator, which holds the icon should be displayed or not
labelVisible Boolean - indicates whether the label section of the step should be displayed or not

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "ONE",
            content: "Step 1 Content"
        }, {
            title: "TWO",
            content: "Step 2 Content",
            iconTemplate: "<strong>#:title#</strong>"
        },{
            title: "THREE",
            content: "Step 3 Content"
        }]
    });
</script>

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "ONE",
            content: "Step 1 Content"
        }, {
            title: "TWO",
            content: "Step 2 Content",
            iconTemplate: function(e) {
                return '<strong>' + e.title + '</strong>';
            }
        },{
            title: "THREE",
            content: "Step 3 Content"
        }]
    });
</script>

steps.pager

Boolean

Specifies whether the pager will be rendered on the current step or not.

Default: true

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "Initial step",
            pager: false
        }]
    });
</script>

steps.title

String

Specifies a title of the current step.

<div id="wizard"></div>

<script>
    $("#wizard").kendoWizard({
        steps: [{
            title: "Initial step"
        }]
    });
</script>

Related Members