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

Description

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:

1. Subscribe to the Activate event of the component.

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

2. In the JavaScript handler check, use a conditional statement to check whether the last step of the Wizard is activated.

3. If activated, select its form element with jQuery.
4. Use the getBoundingRect method of the Web API to get the position of the form on the page.

5. 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.

More ASP.NET MVC Wizard Resources

• ASP.NET MVC Wizard Documentation

• ASP.NET MVC Wizard Demos

• ASP.NET MVC Wizard Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Wizard's for ASP.NET MVC
• Server-Side API Reference of the Wizard for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base