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:

const layout = new dhx.Layout("layout_container", {
    width:"400px", height:"600px"
});

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

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.

const layout = new dhx.Layout("layout_container", {
    width:"400px", height:"600px"
});
const 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 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 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