Configuration

Layout structure

You can use dhtmlxLayout to build the necessary composition of blocks to arrange parts of your application. There are three common types of layout:

horizontal layout

This type of layout contains several rows of cells which are placed horizontally.

var layout = new dhx.Layout("layout_container", {                                  
    rows: [
       { header: "The header of the row 1" },
       { header: "The header of the row 2" },
       { header: "The header of the row 3" },
       { header: "The header of the row 4" }
    ]                                        
});

vertical layout

This type of layout includes a set of columns of cells that are located vertically.

var layout = new dhx.Layout("layout_container", {   
    cols: [
        { header: "The header of the column 1" },
        { header: "The header of the column 2" },
        { header: "The header of the column 3" },
        { header: "The header of the column 4" }
    ]
});

mixed layout

In this layout type both rows and columns are used, i.e. a row can may include several columns and a column may have rows inside.

var layout = new dhx.Layout("layout_container", {   
    rows: [
        {
            cols: [
                {
                    header: "Block 1"                        
                },
                {
                    header: "Block 2"               
                }
            ]
        },
        {
            rows: [
                {
                    header: "Block 3"                                       
                },
                {
                    header: "Block 4"                                                
                }
            ]
        }
    ]
});

Configuration of 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"}
    ]
});

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: Header - DHTMLX Layout

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: Header - DHTMLX Layout

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"
                }
            ]
        }
    ]
});

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

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