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

Steps.buttons

configuration

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.

steps.buttons

Array

<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.buttons.click

Function

A click handler that defines the logic to be executed upon button click.

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

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

steps.buttons.enabled

Boolean

Specifies whether the Button in question is enabled or not.

Default: true

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

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

steps.buttons.name

String

Specifies the name of the Button. The default buttons have "reserved" names (those names are "previous", "next", "done", "reset"). That would allow additional customization of that Buttons' text and behavior.

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

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

steps.buttons.primary

Boolean

Specifies whether the Button will have the k-primary class assigned or not.

Default: false

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

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

steps.buttons.text

String

Specifies the text to be displayed in the Button.

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

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