Configuration of a Cell

HTML content

A layout cell can have any HTML content inside it. You can set it with the html attribute in the object of a cell.

const layout = new dhx.Layout("layout_container", {
    cols: [
        { header: "Cell header", html: "Hello world"}
    ]
});

Related sample: Layout. HTML content

Hidden cell

It is possible to add the hidden attribute into the the object of a cell(s) to render a layout with some cells hidden:

const layout = new dhx.Layout("layout_container", {
    cols: [
        { header: "Cell header", hidden:true}
    ]
});

Cell header

Each layout cell can have a header with some text that describes the content of this cell.

const layout = new dhx.Layout("layout_container", {
    cols: [
        { header: "Perfect cell header"}
    ]
});

You can also add an icon or an image into the header of a cell with the help of corresponding attributes - headerIcon and headerImage.

const layout = new dhx.Layout("layout_container", {
    cols: [
        { header: "Cell header", headerIcon:"/icon.png"}
    ]
});

// or
const layout = new dhx.Layout("layout_container", {
    cols: [
        { header: "Cell header", headerImage:"/img.png"}
    ]
});

Related sample: Layout. Header

Height of a header cell

You can specify the necessary height of the header of a cell using the headerHeight configuration option of the cell:

const layout = new dhx.Layout("layout_container", {
    rows: [
        {
            id: "row1"
        },
        {
            id: "row2",
            header: "Row 2",
            headerHeight: 80
        }
    ]
});

Related sample: Layout. Header

If the header property is not set in the config of a cell, the headerHeight option will add a header without text for a cell.

Cell size

You can easily control and change the size of a cell via the width and height attributes of the object of a cell.

const layout = new dhx.Layout("layout_container", {   
    rows: [
        {
            cols: [
                {
                    header: "Block 1",
                    width: "40%"                                
                },
                {
                    header: "Block 2",                  
                    width: "60%"
                }
            ]
        },
        {
            rows: [
                {
                    header: "Block 3",
                    height: "200px"                             
                },
                {
                    header: "Block 4",                              
                    height: "300px"
                }
            ]
        }
    ]
});

Starting from v7.0, you can define the maximal and minimal sizes for a cell by using its corresponding configuration properties: maxHeight, maxWidth, minHeight, minWidth.

const layout = new dhx.Layout("layout_container", {
    cols: [
        { 
            header: "Cell header", 
            minWidth: "400px",
            maxWidth: "600px",
            minHeight: "40px",
            maxHeight: "100px"
        }
    ]
});

note

Note, that minWidth/maxWidth properties prevent the width of a cell from being less/greater than minWidth/maxWidth values accordingly. The minHeight/maxHeight options work in the same way.

const layout = new dhx.Layout("layout_container", {
    cols: [
        { 
            header: "Cell header", 
            width: "50%", 
            maxWidth: "200px" 
        }
    ]
});

As you can see from the code example above, the width of the cell occupies 50% of the parent container width but is not larger than 200px.

Autosize for cells

Starting with v7.0, you can configure a cell so that its width/ height would automatically adjust to the width/ height of the cell content. For this purpose, you need to set the width/ height options to "content":

const layout = new dhx.Layout("layout_container", {
    cols: [
        { 
            header: "Cell header", 
            width: "content"
        },
        // more options
    ]
});

Collapsibility

There are two attributes of the object of a cell: collapsable and collapsed. The first one defines whether a cell can be collapsed and expanded, and the second one checks whether a cell is collapsed during the initialization of a layout.

const layout = new dhx.Layout("layout_container", {
    cols: [
        { header: "Cell header", collapsable:true, collapsed:false}
    ]
});

Related sample: Layout. Collapsable and resizable

Related sample: Layout. Accordion

Progress bar

You can configure a Layout cell so that it would render a progress bar (in other words, a loading spinner) if there is no any component or HTML content attached to the cell. To do that, enable the progressDefault attribute in the configuration object of the cell:

const layout = new dhx.Layout("layout_container", {
    type: "line",
    rows: [
        {
            id: "one",
            header: "Header",
            height: "250px",
            resizable: true,
            progressDefault: true
        },
        {
            id: "two",
            height: "250px",
            progressDefault: true,
        },
    ]
});

Note, as soon as you attach a component or HTML content to the cell, the progress bar will be hidden.

By default, the progressDefault attribute is disabled.

Resizability

To allow resizing of a cell, make use of the resizable option in the object of a cell.

const layout = new dhx.Layout("layout_container", {
    cols: [
        { header: "Cell header", resizable:true}
    ]
});

Related sample: Layout. Collapsable and resizable

note

Starting from v7.0, you can define the resizing limits by setting necessary values to the minWidth/maxWidth, minHeight/maxHeight properties in the config of a cell.

Setting borders for cells

By default, there is no space and borders between cells inside a layout and the cells look like they are merged. Starting from v7.0, it is possible to split the cells by adding borders or space between them via the type configuration property of a Layout cell:

const layout = new dhx.Layout("layout_container", {
    type: "space",
    cols: [
        {
            html: "1"
        },
        {
            html: "2"
        },
        {
            html: "3"
        }
    ]
});

Related sample: Layout. Types: space, wide, line, none

Related sample: Layout. Types in a complex layout

The available values of the option are "line", "wide", "space", "none".

type:"line"	type:"wide"	type:"space"	type:"none"