steps.iconTemplate String|Function

The template used to render the icon in the indicator of the step.

The fields which can be used in the template are:

  • label String - the label set on the step
  • icon String - the icon specified for this step (if any)
  • successIcon String - the successIcon specified for this step (if any)
  • enabled Boolean - indicates whether the step is enabled (true) or disabled (false)
  • error Boolean - indicates whether the step has error (true) or not (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

Example - Use a string template

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "ONE"
        }, {
            label: "TWO",
            iconTemplate: "<strong>#:label#</strong>"
        },{
            label: "THREE"
        }]
    });
</script>

Example - Use a function

<nav id="stepper"></nav>

<script>
    $("#stepper").kendoStepper({
        steps: [{
            label: "ONE"
        }, {
            label: "TWO",
            iconTemplate: function(e) {
                return '<strong>' + e.label + '</strong>';
            }
        },{
            label: "THREE"
        }]
    });
</script>
In this article