Skip to main content

Initialization

info

Download the DHTMLX Grid package:

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

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>How to start with DHTMLX Grid</title>         
        <script type="text/javascript" src="../../codebase/grid.js"></script>
        <link rel="stylesheet" href="../../codebase/grid.css">
    </head>
    <body>
        <div style="height:500px; width:600px" id="grid_container"></div>
        <script>
            // creating DHTMLX Grid 
            const grid = new dhx.Grid("grid_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>

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 DHTMLX Grid into the header of the created file. The Grid component can be used standalone or as a part of the Suite library.

If you use DHTMLX Grid standalone, you need to include 2 files:

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

If you use DHTMLX Grid as a part of the Suite package, you need to include JS/CSS files of the DHTMLX Suite 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 Grid and give it an id, for example "grid_container":

index.html
<div id="grid_container"></div>

Initialize Grid​

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

  • the HTML container for Grid,
  • optional, an object with configuration properties. If this argument is not passed to the constructor, the settings will be default.
// creating DHTMLX Grid
const grid = new dhx.Grid("grid_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,
});

Configuration properties​

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

See the full list of properties that you can specify in the Grid configuration object (the second parameter of the constructor function) in the Grid API overview article.

Load data into Grid​

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

Example​