Skip to main content

Locking

Dockview can be locked at two levels: the whole layout, or an individual group. Locking prevents users from rearranging the layout while leaving the API free to make programmatic changes.

Locking the layout​

Locking the whole component prevents users from resizing groups with the drag handles between them. Combine it with disabling drag and drop for a fully static, read-only layout.

You may want to combine this with disableDnd={true} to provide a locked grid with no drag and drop functionality. See Disable drag and drop for more.

Locking a group​

Locking an individual group prevents users from dragging new panels into it, while leaving the rest of the layout fully interactive. You can still add panels to a locked group programmatically through the API.

panel.group.locked = true;

// Or

panel.group.locked = 'no-drop-target';

Use true to keep the drop zones at the top, right, bottom and left of the group. Use 'no-drop-target' to disable all drop zones. To get a better understanding of what this means, try dragging the panels in the example below onto the locked groups.

See also​