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>

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 (besides config options listed below) contains the structure of Layout
var layout = new dhx.Layout("layout_container", {cols});

Configuration properties

Cell object

  • id - (string) the id of a cell
  • html - (string) sets HTML content for a cell
  • hidden - (boolean) defines whether a cell is hidden
  • header - (string) the text of the header of a cell
  • headerIcon - (string) an icon used in the header of a cell
  • headerImage - (string) an image used in the header of a cell
  • width - (string) sets the width of a cell
  • height - (string) sets the height of a cell
  • css - (string) the name of a CSS class applied to a cell
  • collapsable - (boolean) defines whether a cell can be collapsed
  • resizable - (boolean) defines whether a cell can be resized
  • collapsed - (boolean) defines whether a cell is collapsed
  • align - (string) sets the alignment of content inside a cell
  • gravity - (boolean) arranges content evenly throughout the cell
  • padding - (number) defines the distance between a cell and the border of layout

Layout object

  • rows - (array) an array of rows objects
  • cols - (array) an array of columns objects
  • views - (array) an array of views objects
  • activeView - (string) sets the currently active view
Back to top