Initialization

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

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxGrid</title>         
        <script type="text/javascript" src="../../codebase/grid.js"></script>
        <link rel="stylesheet" href="../../codebase/grid.css">
    </head>
    <body>
        <div id="grid_container"></div>
        <script>
            // creating dhtmlxGrid 
            var 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

Create an HTML file and place full paths to CSS and JS files of dhtmlxGrid into the header of the created HTML file. The files are:

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

Create a container

Add a container for Grid and give it an id, for example "grid_container":

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

grid.html

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

There is a set of properties you can specify for Grid 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 Grid configuration object (the second parameter of the constructor function):

  • columns - (array) defines the configuration of grid columns
  • data - (array) sets a data set for a grid
  • width - (number) sets the width of a grid
  • height - (number) sets the height of a grid
  • fitToContainer - (boolean) defines whether a grid should fit the size of its container
  • type - (string) specifies the type of a grid. Set the value of the property to "tree" to initialize a tree grid
  • selection - (boolean) switches selection in a grid on/off
  • spans - (array) defines the configuration of cols/rows spans
  • headerRowHeight - (number) sets the height of a row inside the header, 40 by default
  • footerRowHeight - (number) sets the height of a row inside the footer, 40 by default
  • columnsAutoWidth - (boolean) defines whether width of columns automatically adjusts to their content, false by default
  • disableHeaderSort - (boolean) controls the ability to sort columns' content by clicking their headers
  • splitAt - (number) sets the number of columns that should be frozen, thus spllitting a grid into the static and scrollable parts
  • rowHeight - (number) sets the height of a grid row, 40 by default
  • rowCss - (function) sets a custom styling to a row

Load data into Grid

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

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

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

Back to top