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.

var 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:

var 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.

var 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.

var layout = new dhx.Layout("layout_container", {
    cols: [
      { header: "Cell header", headerIcon:"/icon.png"}
    ]
});
 
// or
var 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 cell with a header using the headerHeight configuration option of a cell:

var layout = new dhx.Layout("layout", {
    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.

var 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.

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

var 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":

var 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.

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

Related sample:  Layout. Collapsable

Related sample:  Layout. Accordion

Resizability

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

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

Related sample:  Layout. Resizable

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", {
    type: "space",     cols: [
        {
            html: "1"
        },
        {
            html: "2"
        },
        {
            html: "3"
        }
    ]
});

Related sample:  Layout.Type

Related sample:  Combination of types - DHTMLX Layout

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

type:"line"	type:"wide"	type:"space"	without borders

Back to top