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

Iterating over cells

To iterate over the cells of Layout, use the forEach() method. Layout calls the passed callback function for each cell with the following parameters:

• cell - the object of a cell
• index - the index of a cell
• array - an array with the cells

layout.forEach((cell, index, array) => {
    console.log(index, cell.id);
});

By default, the method starts iterating from the root cell and visits each nested level. To limit the iteration, pass the id of the parent cell as the second parameter and the number of levels to iterate over as the third parameter:

layout.forEach((cell, index, array) => {
    console.log(index, cell.id);
}, parentID, level);

Related sample: Layout. ForEach

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

Attach a component

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.

Detach a component

To detach a component from a Layout cell, use the detach() method of a cell:

layout.getCell("list").detach();

Attaching an HTML content to a cell

Attach HTML content

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

Detach HTML content

To detach any HTML content from a Layout cell, use the detach() method of a cell:

layout.getCell("content").detach();

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

Showing/hiding a progress bar

A progress bar is a visual component which informs users that the content is loading or updating. You may show or hide the component via API calls either in the Layout container or in a separate cell.

The progress bar can be also shown by default for cells without any attached component or HTML content. Check the details.

Progress bar in the Layout container

To show the progress bar in the container of a Layout, use the progressShow() method of Layout:

layout.progressShow();

To hide it, use the progressHide() method:

layout.progressHide();

Progress bar in a Layout cell

To show the progress bar in a separate Layout cell, apply the progressShow() method of a Layout cell:

layout.getCell("two").progressShow();

To hide the component, apply the progressHide() method of the cell:

layout.getCell("two").progressHide();

Related sample: Layout. Spinner (busy indicator/ progress bar) for Layout and its cells