Search code examples
javascriptjquerykendo-uiwizardstepper

How to customize kendo step?

I would like to change the KENDO UI Wizard step dynamically. For example, change the icon background colour and the title by each step. I tried to search the documentation, but I could not find the right answer. How to add an Id or attribute into each step? I've tried to change the title properties, but it was not working properly.

Is there any way to customize the wizard to step dynamically? I would appreciate any help. Thanks.

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

  <script>
$("#wizard").kendoWizard({
  steps: [{
    title: "ONE",

    content: "Step 1 Content"

  }, {  
    
    title: kendo.template($("#stepTemplate").html()),  
    error: true,
    content: "Step 2 Content" 
  },{
    title: "THREE",
    content: "Step 3 Content"
  }]
});
 </script>

 <script id="stepTemplate" type="text/x-kendo-template">
    <div>
        <span><strong>TWO</strong></span> 
   </div>
 </script>
Solution

  • The idea is to catch it on the activate event. Handling it on the select event might also work. On the event handler, grab the wizard instance, wait for the Kendo Wizard to do its work (update the HTML) - hence the setTimeout, then find the focused list item and do as you please. The example below changes the background color. Try it on the Telerik DOJO. This should get you started.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="wizard"></div>

<script>
    var $wizard = $("#wizard");
    var wizard = $wizard.kendoWizard({
        contentPosition: "right",
        steps: ["Initial step", "Second step", "Third step"],
        activate: function(e) {
            var wizard = e.sender;
            setTimeout(function() {
                wizard.element.find('li.k-step').each(function(){
                    $(this).css("background-color", "initial");
                })
                var $li = wizard.element.find('li.k-step-focus');
                $li.css("background-color", "blue");
            }, 100);
        },
    }).data('kendoWizard');
    
    
</script>
</body>

    To change the label of the steps, insert the code below after $li.css("background-color", "blue");

    var step = wizard.activeStep();
var $label = $li.find('span.k-step-text');
switch (step.options.index) {
    case 1:
        $label.text('Two');
        break;
    case 2:
        $label.text('Three');
        break;
    default:
        $label.text('One');
        break;
}

    The li element is the key! It is my fervent hope that by now, you get the idea.