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