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 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

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 cell
layout.getCell("toolbar").hide();

Related sample: Layout. Hide

// showing a cell
layout.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 visibilty of cell via the isVisible method. It returns true if a 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 id
layout.getCell("sidebar").collapse();
 
// expanding a cell by its id
layout.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