Last Updated: 03 Apr 2023 13:10 by ADMIN
Created on: 27 Mar 2023 18:17
Category: Wizard
Type: Feature Request
Add an error badge to the step icon in the Wizard with form integration when server-side errors are received

In a Wizard with form integration, once you click on the "Done" button, the form is posted to the server, if the server returns the page with any errors in the ModelState, the wizard is displayed again from the first step and any errors are added to their respective fields.

The problem is that if the errors are not in the first step, the user simply sees the Wizard returning to the first step with no obvious indication of why. Only when he navigates to the next steps he will understand that an error was found. If the Wizard has many steps and the error in only in the last ones, the user can get confused.

It would be nice if the wizard could display an icon/badge on top of the step icon indicating that an error was found in that step.

1 comment
Posted on: 03 Apr 2023 13:10

Hi Marcos,

Indeed, the ideas you have provided make for a valid feature request. And thus, I would like to thank you for additionally sharing your thoughts and specific scenario in which the introduction of such functionality is applicable.

I have conducted further research on any potential alternatives that could achieve the desired outcome. And after further exploration, I stumbled upon the following approach:

  • On the server-side, create a dynamic dictionary value which will be used to determine the steps where the errors occurred:
public IActionResult Index({custom model} model)
    var stepErrors = new List<int>(); // Variable for storing the step indices.

    if ({custom evalutation logic})


        ModelState.AddModelError({custom field},{custom message});

    stepErrors = stepErrors.Distinct().ToList(); // Obtain only the distinct steps if multiple steps of the same kind are added.
    if (!ModelState.IsValid)
        ViewData["ErrorSteps"] = stepErrors; // Create the ViewData dictionary and add the step errors.
        return View(model);
    return Ok("Success");
  • Create a JavaScript flag variable that will hold the serialized value of the ViewData dictionary:
var errorSteps = @Json.Serialize(ViewData["ErrorSteps"]);
  • Subscribe to the document.ready() method and inside:
    • Get the client-side reference of both the Wizard and Stepper widgets.
    • Traverse through each of the added indices of the flag variable.
    • Filter out the step elements that match the error indices.
    • Instantiate a badge widget for the given step.
            var wizard = $("#wizard").data("kendoWizard"); // Obtain the Wizard reference.
            var stepper = $(wizard.stepper.element).data("kendoStepper"); // Gather the stepper reference.
            var steps = stepper.steps(); // Get the step elements.
            errorSteps.forEach(stepIndex => { // Traverse through each of the error step indices from the flag variable.
                var step = steps.filter(step => { // Filter out the matching step.
                    return step.options.index + 1 == stepIndex;
                $(step[0].element).find(".k-step-link").css("overflow", "visible"); // Change the overflow style in order to display the to-be-created badge accordingly.
                var stepIndicator = $(step[0].element).find(".k-step-indicator"); // Obtain the step indicator.
                stepIndicator.append("<span class='step-badge'></span>") // Append a span container for the badge.
                $('.step-badge').kendoBadge({ // Instantiate a badge component for each of the steps that have errors.
                    themeColor: 'error',
                    icon: 'exclamation-circle',
                    size: 'small',
                    align: 'top end',
                    position: 'edge',
                    rounded: 'large'

The aforementioned result would then produce an identical result as the following:

In addition, if the badges need to be persistent upon step navigation, the same layer of logic can also be implemented by wiring to the Activate event.

For your convenience and that of the community, I am also attaching a runnable sample that tackles such an approach. The behavior within can be reproduced by:

  • Typing less than 3 letters in the "Username" field.
  • Clicking on the "Done" button to instantiate the Wizard form's submission.

It is important to mention that this is generally considered a customary approach and any further enhancements or modifications would fall within the developer's hands for further implementation.

I hope this helps.

Kind Regards,
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Attached Files: