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.