Expanding/Collapsing Cells

Overview

Expanded state is the state when a cell is open, i.e. the user can see both header and body of the cell.
Collapsed state is the state when a cell is closed, i.e. the user can see only the header of the cell.

Common logic

If the last visible cell in a row/column becomes collapsed, the nearest collapsed cell will be expanded instead. The component expands either the nearest left cell or the nearest right cell (if there is no nearest left one).

In other words, if there are two or more cells in a row/column, at least one of them will always be expanded.

Localization

You can localize the tooltip of the "Expand/Collapse" button into the desired language by using the following technique:

dhtmlXLayoutCell.prototype.i18n.expand = "Expand/Collapse";

API

To expand an item, use the expand method:

myLayout.cells("a").expand();

To collapse an item, use the collapse method:

myLayout.cells("a").collapse();