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 JS and CSS files of dhtmlxGrid 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 dhtmlxGrid 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 dhtmlxGrid 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 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):

  • adjust - (boolean|string) defines whether the width of columns is automatically adjusted to the width of their content
  • autoEmptyRow - (boolean) adds an empty row after the last filled row in the Grid
  • autoWidth - (boolean) makes grid's columns to fit the size of a grid
  • columns - (array) defines the configuration of grid columns
  • css - (string) adds style classes to Grid
  • data - (array) sets a data set for a grid
  • dragCopy - (boolean) defines that a row is copied to a target during drag-n-drop
  • dragMode - (string) enables drag-n-drop in Grid
  • editable - (boolean) enables editing in Grid columns
  • footerRowHeight - (number) sets the height of a row inside the footer, 40 by default
  • headerRowHeight - (number) sets the height of a row inside the header, 40 by default
  • height - (number) sets the height of a grid
  • htmlEnable - (boolean) specifies the HTML content (inner HTML) of Grid columns
  • keyNavigation - (boolean) enables keyboard navigation in Grid
  • multiselection - (boolean) enables multi-row/multi-cell selection in Grid
  • resizable - (boolean) defines whether columns can be resized
  • rowCss - (function) sets a custom styling to a row
  • rowHeight - (number) sets the height of a grid row, 40 by default
  • selection - (boolean) switches selection in a grid on/off
  • sortable - (boolean) defines whether sorting on clicking headers of columns is enabled
  • spans - (array) defines the configuration of cols/rows spans
  • splitAt - (number) sets the number of columns that should be frozen, thus splitting a grid into the static and scrollable parts
  • width - (number) sets the width of a grid

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