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

Description

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 = $('');
AUI.LockUI.element(ele,'{grid.style}UILock');

 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.
Mode
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.
DIV ID
Specify the ID of the DIV.
Container ID
Specify the ID of the container. Choices include.

 Videos

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