Skip to main content

Work with Layout

Removing cells#

To remove a certain cell from a layout, apply the removeCell() method. As a parameter it takes the id of a cell to be removed:

layout.removeCell(id);

Related sample: Layout. Remove Cell

Getting the object of a cell#

You can get the object of a cell by its id. Use the getCell() method for this purpose:

layout.getCell("header");

Attaching a component to a cell#

You can easily attach any DHTMLX component (except for Message, Popup, Window) to a cell of Layout using the attach() method of a cell:

var layout = new dhx.Layout({width:"400px", height:"600px"});
var list = new dhx.List(null, {    template: listTemplate,    itemHeight: 52,    height: "100%",    dragMode: "both"});        list.data.load('../common/library.json');
layout.getCell("list").attach(list);

Related sample: Layout. Attach

note

The Message, Popup, Window components can't be attached to the Layout cell because these components can't have the parent container due to their architecture principles.

Attaching an HTML content to a cell#

You can easily attach some HTML content to a cell of Layout via the attachHTML() method of a cell. It takes as a parameter a string with HTML.

var layout = new dhx.Layout({width:"400px", height:"600px"});var html = "<p>Hello world</p>";layout.getCell("content").attachHTML(html);

Hiding/showing a cell#

It is possible to hide/show a cell with the help of its API. Both the hide() and show() methods take the id of a cell as a parameter.

// hiding a celllayout.getCell("toolbar").hide();

Related sample: Layout. Hide

// showing a celllayout.getCell("toolbar").show();

Related sample: Layout. Show

Checking visibility of a cell#

Since the object of a cell has the hidden attribute, a cell can be hidden in a layout. You can check the visibility of a cell via the isVisible() method. It returns true if the cell is visible and false if it is hidden.

layout.getCell("sidebar").isVisible(); // -> true|false

Collapsing/expanding a cell#

You can collapse/expand a specified cell using two corresponding methods of a Layout cell - collapse() and expand():

// collapsing a cell by its idlayout.getCell("sidebar").collapse();
// expanding a cell by its idlayout.getCell("sidebar").expand();

Related sample: Layout. Expand/Collapse

Toggling a cell#

It is also possible to collapse and expand a specified cell of Layout using the toggle() method of a cell:

layout.getCell("toolbar").toggle();

Related sample: Layout. Toggle