Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.dhtmlx.com/suite/layout/work_with_layout/ below:

JavaScript Layout - Work with Layout

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:

Related sample: Layout. Remove cell

You can get the object of a cell by its id. Use the getCell() method for this purpose:

layout.getCell("header");

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.

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

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

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

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

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

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.

layout.getCell("toolbar").hide();

Related sample: Layout. Hide

layout.getCell("toolbar").show();

Related sample: Layout. Show

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

You can collapse/expand a specified cell using two corresponding methods of a Layout cell - collapse() and expand():

layout.getCell("sidebar").collapse();


layout.getCell("sidebar").expand();

Related sample: Layout. Expand / collapse

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

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.

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

To hide it, use the progressHide() method:

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4