A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://docs.dhtmlx.com/suite/layout/initialization/ below:

JavaScript Layout - Initialization | DHTMLX Suite 9 Docs

Initialization

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

<!DOCTYPE html>
<html>
    <head>
        <title>How to start with DHTMLX Layout</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>
            
            const 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​

Unpack the downloaded package into a folder of your project.

After that, create an HTML file and place full paths to JS and CSS files of the DHTMLX Suite library into the header of the file. The files are:

<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:

const 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:

const 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.

Example​

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4