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​

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