Skip to main content

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