Skip to main content

Initialization

To initialize dhtmlxTreeGrid on a page, you need to take the following simple steps:

index.html
<!DOCTYPE html><html>    <head>        <title>How to Start with dhtmlxTreeGrid</title>                 <script type="text/javascript" src="../../codebase/treegrid.js"></script>        <link rel="stylesheet" href="../../codebase/treegrid.css">    </head>    <body>        <div id="treegrid" style="height: 100%; width: 100%"></div>        <script>            // creating dhtmlxTreeGrid             var treegrid = new dhx.TreeGrid("treegrid_container", {                columns: [                    { width: 100, id: "a", header: [{ text: "#" }] },                    { width: 100, id: "b", header: [{ text: "Title" }] },                    { width: 200, id: "c", header: [{ text: "Name" }] },                    { width: 200, id: "d", header: [{ text: "Address" }] }                ],                headerRowHeight: 50,                data: dataset            });        </script>    </body></html>

Related sample: TreeGrid. Basic initialization

Include source files#

Create an HTML file and place full paths to JS and CSS files of dhtmlxTreeGrid into the header of the created file. The TreeGrid component can be used standalone or as a part of the Suite library.

If you use dhtmlxTreeGrid standalone, you need to include 2 files:

  • treegrid.js
  • treegrid.css
<script type="text/javascript" src="../../codebase/treegrid.js"></script><link rel="stylesheet" href="../../codebase/treegrid.css">

If you use dhtmlxTreeGrid as a part of the Suite package, you need to include JS/CSS files of the dhtmlxSuite library:

  • suite.js
  • suite.css
<link type="text/css" href="../codebase/suite.css"><script src="../codebase/suite.js" type="text/javascript"></script>

Create a container#

Add a container for TreeGrid and give it an id, for example "treegrid_container". To display TreeGrid on the page correctly, define width and height of the container.

index.html
<div id="treegrid_container" style="width:800px; height:600px"></div>

Initialize TreeGrid#

Initialize TreeGrid with the dhx.TreeGrid object constructor. The constructor has two parameters:

  • the HTML container for TreeGrid,
  • optional, an object with configuration properties. If this argument is not passed to the constructor, the settings will be default.
script.js
// creating dhtmlxTreeGridvar treegrid = new dhx.TreeGrid("treegrid_container", {    columns: [        { width: 100, id: "a", header: [{ text: "#" }] },        { width: 100, id: "b", header: [{ text: "Title" }] },        { width: 200, id: "c", header: [{ text: "Name" }] },        { width: 200, id: "d", header: [{ text: "Address" }] }    ],    headerRowHeight: 50,    data: dataset});

Configuration properties#

There is a set of properties you can specify for TreeGrid to optimize its configuration for your needs.

See the detailed information on configuration properties of TreeGrid in the TreeGrid API overview article.

Load data into TreeGrid#

There are several handy ways of loading data into TreeGrid. You can add data both before and after initialization of the component.

  • via the data option in the configuration object of Grid:
var treegrid = new dhx.TreeGrid("treegrid_container", {    columns: [// columns config],    data: dataset });
  • from an external file with the help of the load() method of data collection:
var treegrid = new dhx.TreeGrid("treegrid_container", {treegrid.data.load("../common/dataset.json");

Related sample: TreeGrid. External data loading

  • from a local source using the parse method of data collection:
var treegrid = new dhx.TreeGrid("treegrid_container", {treegrid.data.parse(dataset);

Detailed information on loading data into TreeGrid is given in the Data Loading article.