Loading Data into Grid

You can load data of 4 formats into dhtmlxGrid:

• XML.
• JSON.
• CSV.
• JSArray.
• + you can define a custom data format.

Learn more about formats supported by dhtmlxGrid in article Exploring Supported Data Formats.

Loading from an inline dataset

The easiest way to load data to a grid is to use an inline object in JSON format.
To load data from an inline object, 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

Related sample:  Loading from JSON

Loading from a static file

If you put data into a individual file, use the load method to load data from this file to the grid:

mygrid.load("data/books.json","json");
//or
mygrid.load("data/books.json",function(){alert("Data has been loaded.")},"json");

The load method can take 3 parameters:

1. The relative path to the data file (relative according to your HTML file).
2. A callback function that will be called just after the data is completely loaded and processed. The parameter is optional and can be omitted.
3. The format of data to load. By default, "xml". Available values: "xml", "json", "js", "jsarray", "csv".

Related sample:  Loading from JSON

Loading from the server side

To load data from the server, use the load method on the client side (as a parameter, the method takes the path to the server-side script):

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

For example, for the data source described above, you need to create a table in your database as in:

You can execute the following code to create the table:

CREATE TABLE `events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `author` varchar(255) NULL,
  `sales` int(11) NOT NULL,
  PRIMARY KEY (`id`)
)

Using dhtmlxConnector as a server-side solution

To implement server-side logic for dhtmlxGrid, we recommend you to use dhtmlxConnector library as the easiest way. You can learn more about the library from the related chapter of the documentation.

The server-side script in case of using dhtmlxConnector will look something like this:

Using dhtmlxConnector for implementing server-side logic

//"connector.php" file
<?php
require_once("codebase/connector/grid_connector.php"); // includes the connector file
 
// connects to a server with a desired 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

and on the client-side:

//"index.html" file
mygrid.load("connector.php");

All available samples of the dhtmlxGrid +connector you can find in the dhtmlxConnector package which can be downloaded here.

Back to top