Disabling User Input in a Wizard Step

Environment

Product	Telerik UI for ASP.NET Core Wizard
Progress Telerik UI for ASP.NET Core 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 Core Wizard Resources

• ASP.NET Core Wizard Documentation

• ASP.NET Core Wizard Demos

• ASP.NET Core Wizard Product Page

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

• Telerik UI for ASP.NET Core Forums

See Also

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