Disabling User Input in a Wizard Step

Environment

Product	Telerik UI for ASP.NET MVC Wizard
Progress Telerik UI for ASP.NET MVC version	Created with the 2023.1.117 version

I'm building a Wizard in which the final step makes all previous steps and their controls visible so that users can review their inputs and selections. At this point, none of the controls must be editable, selectable, or clickable.

Solution

Currently, the Wizard and the Form do not deliver methods that disable all of their internal editors.

Therefore, the most straightforward way is to overlay the Wizard's Form:

Subscribe to the Activate event of the component.

    .Events(ev => ev.Activate("onActivate"))

In the JavaScript handler check, use a conditional statement to check whether the last step of the Wizard is activated.
If activated, select its form element with jQuery.
Use the getBoundingRect method of the Web API to get the position of the form on the page.

Use the form's position to append a div that has the same position and size as the form but with a transparency, greater that the z-index, and position:absolute.

    function onActivate(e){
        if(e.sender.currentStep.options.index==e.sender.currentStep.options.totalSteps-1){
            var form = e.sender.currentStep.form.element;
            var rect = form[0].getBoundingClientRect();
            var width = $(form).width();
            var height = $(form).height();
            $(body).append(`<div id="overlay" style=' z-index:1000; position:absolute; top:${rect.top}px; left:${rect.left}px; width:${width}px; height:${height}px; background-color:rgba(127,127,127,0.3)'></div>`)
        }
    }

To explore the complete example, see the project on how to display an overlay over the last step of the Wizard.

Disabling User Input in a Wizard Step

Environment

Description

Solution

More ASP.NET MVC Wizard Resources

See Also

Getting Started

Support Resources

Community