Skip to main content


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.