Initialization

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

<!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_container"></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 (see the full list below). If this argument is not passed to the constructor, the settings will be default.

index.html

// 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
});

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

Configuration properties

There is a list of properties that you can specify in the TreeGrid configuration object (the second parameter of the constructor function):

adjust defines whether the width of columns is automatically adjusted to the width of their content
autoWidth makes treegrid's columns to fit the size of a treegrid
columns defines the configuration of grid columns
css adds style classes to TreeGrid
data sets a data set for a grid
dragCopy defines that a row is copied to a target during drag-n-drop
dragItem enables the possibility to reorder treegrid columns by drag and drop
dragMode enables drag-n-drop in Grid
editable enables editing in TreeGrid columns
footerRowHeight sets the height of a row inside the footer, 40 by default
groupTitleTemplate sets a template to the title of a group
headerRowHeight sets the height of a row inside the header, 40 by default
height sets the height of a grid
htmlEnable specifies the HTML content (inner HTML) of TreeGrid columns
resizable defines whether columns can be resized
rowCss sets a custom styling to a row
rowHeight sets the height of a grid row, 40 by default
selection switches selection in a grid on/off
sortable defines whether sorting on clicking headers of columns is enabled
spans defines the configuration of cols/rows spans
splitAt sets the number of columns that should be frozen, thus spllitting a grid into the static and scrollable parts
tooltip enables a tooltip on hovering over the content of a column
width sets the width of a grid

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 article Data Loading.

Back to top