Work with Layout

Adding/removing cells

To add a cell into a layout, use the addCell method. It takes two parameters:

config - (object) the config object of a cell
index - (number) the position to add a cell into

layout.addCell({
    header:"The header of a new cell"
});

The full list of properties of a cell configuration object:

id - (string) the id of a cell
html - (string) sets HTML content for a cell
hidden - (boolean) defines whether a cell is hidden
header - (string) the text of the header of a cell
headerIcon - (string) an icon used in the header of a cell
headerImage - (string) an image used in the header of a cell
width - (string) sets the width of a cell
height - (string) sets the height of a cell
css - (string) the name of a CSS class applied to a cell
collapsable - (boolean) defines whether a cell can be collapsed
resizable - (boolean) defines whether a cell can be resized
collapsed - (boolean) defines whether a cell is collapsed
isAccordion - (boolean) defines whether a layout works as an accordion ??

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

Getting the object of a cell

You can get the object of some cell by its id. Use the cell method for this purpose:

layout.cell("1");

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 list = new dhx.List(null, {
    template: listTemplate,
    itemHeight: 52,
    height: "100%",
    dragMode: "both"
});
 
list.data.load('../common/library.json');
 
layout.cell("list").attach(list);

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.cell("1").hide();
// showing a cell
layout.cell("1").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.cell("1").isVisible(); // -> true|false