Skip to main content

Initialization

To add dhtmlxLayout into an application, you need to take the following simple steps:

<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxLayout</title>
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
</head>
<body>
<div id="layout_container"></div>
<script>
// creating dhtmlxLayout
var layout = new dhx.Layout("layout_container", {
cols: [
{ header: "Column 1" },
{ header: "Column 2", cols: [
{ header:"Left cols"},
{ header:"Center cols",cols: [
{ header: "Sub Block Header cols 1" },
{ header: "Sub Block Header cols 2" },
{ header: "Sub Block Header cols 3" }]
}]
}
]
});
</script>
</body>
</html>

Related sample: Layout. Basic Initialization

Include source files

Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

  • suite.js
  • suite.css
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container

Add a container for the Layout and give it an id, e.g. "layout_container":

<div id="layout_container"></div>

Define Layout structure

Layout consists of a set of cells arranged either into rows or into columns. The structure of a layout can be rather complex, since there can also be nested rows and columns.

For example, you can create a three-level layout structure:

var cols = [
{
header: "Sub Block Header row"
},
{
header: "Sub Block Header row",
cols: [
{
header:"Left cols"
},
{
header:"Center cols",
cols: [
{ header: "Sub Block Header cols 1" },
{ header: "Sub Block Header cols 2" },
{ header: "Sub Block Header cols 3" }
]
},
{
header:"Right"
}
]
},
{ header: "Sub Block Header" },
{ header: "Sub Block Header" }
]

Initialize Layout

Initialize Layout with the dhx.Layout object constructor. The constructor takes two parameters:

  • the HTML object on the page that serves as the layout container
  • a configuration object which contains the structure of Layout
var layout = new dhx.Layout("layout_container", {cols});

Configuration properties

Layout object

The properties of the configuration object of Layout allow you to define the structure of Layout.

See the list of Layout properties here.

Cell object

There is also a set of properties you can specify for a Layout cell to configure it according to your needs.

You will find the detailed information on configuration options of the cell object in the Layout API overview article.