DHTMLX Docs & Samples Explorer


The following kinds of actions are available for dhtmlxLayout users:

  • Expanding/Collapsing
  • Window's Docking/Item's Undocking

Firstly, let's look at some general behavior of items in the layout:
1. If the last visible item in a row/column becomes collapsed, the nearest collapsed item will be expanded instead. The component expands either the nearest left item or the nearest right item (if there is no nearest left one). In other words, if there are two or more items in a row/column, at least one of them will be always expanded.
2. If the last visible item in a row/column becomes collapsed, and there is at least one undocked item in the layout, one of the undocked items will be docked and expanded.

Item's Expanding/Collapsing

To expand an item - use the expand() method:


To collapse an item - use the collapse() method:


Window's Docking/Item's Undocking

Any item in dhtmlxLayout can be easily undocked to a window - extracted from the single layout in order to be displayed separately in a window. In v.1.0 there is no possibility to dock item content to another item - just dock back.
To undock an item - use the undock() method:


An undocked window can be docked back. To make this - use the dock() method: