Check documentation for the latest version of dhtmlxSuite Initializing Grid on a Page DHTMLX Docs
Samples Forum Support
Documentation / Suite 5.X
StartGridCreating Grid on a Page

Initializing Grid on a Page

This article walks you through creating a basic application containing dhtmlxGrid. As you follow the steps, you learn how to initialize dhtmlxGrid, customize and configure its appearance, load data. The final code of the article can be used as the start point while creating applications with the help of dhtmlxGrid.

Step 1. A new HTML file and source files

To begin with, create a new HTML file and include the DHTMLX code files in it (it includes the dhtmlxGrid's functionality)

Each DHTMLX component can be used standalone or as a part of the general library. If you use dhtmlxGrid standalone you need to include its source files on the page:

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

If you use dhtmlxGrid as a part of "dhtmlxSuite" package you need to include 2 files:

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

dhtmlxGrid js/css files are parts of DHTMLX js/css correspondingly, so there is no need to include them separately.

Including source files from CDN

To include the source files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Step 2. Placing dhtmlxGrid on a page

At the next step create a div container where you will place your grid.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Quick start with dhtmlxGrid</title>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
    <script src="../codebase/dhtmlx.js"></script>
</head>
<body>
    <div id="gridbox" style="width:300px;height:400px;"></div>      <script>
    //here you will place your JavaScript code
    </script>
</body>
</html>

Step 3. Object constructor

To create a new dhtmlxGrid object, use the dhtmlXGridObject() constructor:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Quick start with dhtmlxGrid</title>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
    <script src="../codebase/dhtmlx.js"></script>
</head>
<body>
    <div id="gridbox" style="width:600px;height:400px;"></div> 
    <script>
        mygrid = new dhtmlXGridObject('gridbox');
    </script>
</body>
</html>

The only parameter is the HTML container. We've created it at the previous step.

Step 4. Configuring and initializing

After you have created an object of dhtmlxGrid, you can move to its configuration and initialization. The grid is configured by calling the related methods.

We will make the most often used configuration settings:

Basic dhtmlxGrid configuration 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Quick start with dhtmlxGrid</title>
    <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
    <script src="../codebase/dhtmlx.js"></script>
</head>
<body>
    <div id="gridbox" style="width:600px;height:400px;"></div> 
    <script>
        mygrid = new dhtmlXGridObject('gridbox');
 
        //the path to images required by grid         mygrid.setImagePath("./codebase/imgs/");                         mygrid.setHeader("Sales,Book title,Author,Price");//the headers of columns          mygrid.setInitWidths("100,250,150,100");          //the widths of columns          mygrid.setColAlign("right,left,left,left");       //the alignment of columns           mygrid.setColTypes("ro,ed,ed,ed");                //the types of columns          mygrid.setColSorting("int,str,str,int");          //the sorting types           mygrid.init();      //finishes initialization and renders the grid on the page     </script>  
</body>
</html>

We have defined primary settings for the grid. To learn how to configure grid accoring to your needs, read other articles in the documentation, such as:

Step 5. Loading data

If you run the app now, you can already see a grid on the page. But it won't contain any data. To populate the grid, we will take the data from a sample data source. We will use the easiest of the ways and specify the data source as an inline object in JSON format.

To load data from an inline object, we will use the parse method.

data={
    rows:[
        { id:1, data: ["A Time to Kill", "John Grisham", "100"]},
        { id:2, data: ["Blood and Smoke", "Stephen King", "1000"]},
        { id:3, data: ["The Rainmaker", "John Grisham", "-200"]}
    ]
};
mygrid.parse(data,"json"); //takes the name and format of the data source

For more details on the topic, read article Loading data

Step 6. Database structure

Read this and further steps if you want to load data from a database instead of from an inline object.

Now, if you have decided to load data from the server - you need to create a table in your database as in:

You can execute the following code to create the table with 3 records:

-- ----------------------------
-- Table structure for books
-- ----------------------------
CREATE TABLE `books` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(11) NOT NULL,
  `author` varchar(30) NOT NULL,
  `price` varchar(11) NOT NULL,
  PRIMARY KEY (`id`)
)
-- ----------------------------
-- Records 
-- ----------------------------
INSERT INTO `books` VALUES ('1', 'A Time to Kill', 'John Grisham', '100');
INSERT INTO `books` VALUES ('2', 'Blood and Smoke', 'Stephen King', '1000');
INSERT INTO `books` VALUES ('3', 'The Rainmaker', 'John Grisham', '-200');

Note, you can create any number of fields in the db and load them to the grid.

Step 7. Loading data from the server

To load data from a database, use the load method where specify a file realizing server-side 'communication' as a parameter. You may write the full server side by yourself, but we recommend to use dhtmlxConnector, as the easiest way. So, for our task you need to call the method as shown below:

//method takes the url to the file that will process CRUD operations on the server
mygrid.load("connector.php");

The server-side script for dhtmlxGrid is the following:

'connector.php' file 

<?php
require_once("codebase/connector/grid_connector.php");//includes related connector file
 
//connects to server containing the DB named "sampledb"
$res = new PDO("mysql:dbname=sampledb;host=localhost","root","");
$conn = new GridConnector($res,"MySQL");                     //connector initialization
 
$conn->render_table("books","id","title,author,sales");      //data configuration

Step 8. Saving data

If you run the app now, you will see that the grid is able to load data from the database, but unable to save it back. To 'force' the grid save data in the database, use DataProcessor. It's very easy to use DataProcessor. All you need is to initialize it and attach to the grid.

var dp = new dataProcessor("data/connector.php");
dp.init(mygrid);

That's all. A standard grid that can load data from the database and save it back is ready. Now you may configure, change and customize it further to meet all your needs.

What's next

 Back to top