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

<!DOCTYPE html>
        <title>How to Start with dhtmlxLayout</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
        <div id="layout_container"></div>
            // 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: "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 (besides config options listed below) contains the structure of Layout
var layout = new dhx.Layout("layout_container", {cols});

Configuration properties:

Cell object

align sets the alignment of content inside a cell
collapsable defines whether a cell can be collapsed
collapsed defines whether a cell is collapsed
css the name of a CSS class applied to a cell
gravity arranges content evenly throughout the cell
header the text of the header of a cell
headerHeight sets the height of a Layout cell
headerIcon an icon used in the header of a cell
headerImage an image used in the header of a cell
height sets the height of a cell
hidden defines whether a cell is hidden
html sets HTML content for a cell
id the id of a cell
on adds handlers to DOM events of a cell
padding defines the distance between a cell and the border of layout
resizable defines whether a cell can be resized
width sets the width of a cell

Layout object

rows an array of rows objects
cols an array of columns objects
Back to top