Lock/unlock a container, DIV or entire page (by showing an overlay over it)


Lock a container, DIV or entire page by showing an overlay over it so that the user can't click on the controls under the overlay, or unlock the element.

Used with the Grid and UX components.

Javascript placed in 'OnPush' attribute 

var ele = $('');

Lock/Unlock Element Properties 

Lock/Unlock type

Specify if you want to lock/unlock the entire page, or just an element (Container or arbitrary DIV). Choices include Page, Element.


Specify if you want to lock an element, or unlock a previously locked element. Choices include Lock, Unlock.

Automatically unlock after duration

Specify if the element should be automatically unlocked after a specified number of milliseconds. Enter 0 to never automatically unlock the element. For example, enter 1000 to automatically unlock after 1 second.

Lock class

Specify the CSS class for the overlay that is used to lock the specified object.

Object type

Specify if the object you want to lock/unlock or is a Container control, or an arbitrary DIV. Choices include Container, DIV.


Specify the ID of the DIV.

Container ID

Specify the ID of the container. Choices include.


Using a UX Component as an Alternate Editing View for a Record in a Grid

If you have a lot of columns in an updatable Grid, it can be cumbersome to scroll horizontally to edit records. In this video, we show how a UX Component can be used to edit the data in the Grid row. A button can be inserted into the Grid row to open the record in a UX Component for editing. The user can make edits to the record in the UX Component. When they are done editing the record, an Update button closes the UX Component and updates the record in the Grid Component.

See Also