Step 6. Load Data to the Grid

Now, we will load data to the grid. We'll use a MySQL database "dhtmlx_tutorial " and the table "contacts " in it as the data source.

In the grid we will present 3 properties (fname, lname, email ). Note, all contacts are generated with a sample data generator and have no connection to real people.

We will use the PHP platform and the dhtmlxConnector helper library, as this is the easiest way to implement the server-side logic for DHTMLX-based application. The library outputs data in the XML format.

1. Find the "db.sql" file in the demo app and import it into your local database.
2. Create a subfolder with the name "connector " in the "codebase " folder.
3. Download the dhtmlxConnector library (link to download).
4. Open the "dhtmlxConnector.zip " archive and extract the content of its "codebase " folder to the "connector " folder.
5. Create a PHP file in the "data " folder and name it "contacts.php ".
6. Open the "contacts.php " file and add the following server-side code to it:
   
   

   "contacts.php" file

   <?php
   require("../codebase/connector/grid_connector.php");//adds the connector engine
    
   //connects to the db with the name "dhtmlx_tutorial"  
   $res=new PDO("mysql:dbname=dhtmlx_tutorial;host=localhost","user","password");
    
   $conn = new GridConnector($res);             //initializes the connector object
   $conn->render_table("contacts","contact_id","fname,lname,email");  //loads data
   //the method takes: the table's name, the id field, a list of fields to load

   To get the details of loading data from the database and creating XML for dhtmlxGrid, read the tutorial Loading Big Datasets.Dynamic Loading.
   
   
7. Call the load() method to load data from the database to the grid:
   

"index.html" file

contactsGrid.load("data/contacts.php");      //takes the path to your data feed

The client side of the dhtmlxConnector functionality is already contained in the dhtmlx.js file, so we needn't to include any additional files on the page.

Back to top