Step 3. Load Data to the Grid

Now, we will load data to the grid. We'll use a MySQL database "sampledb " and the table "books " in it as the data source. In the grid we will present 3 properties (title, quantity, price ).

To load data we will use the PHP platform and the dhtmlxConnector library, as this is the easiest way to implement the server-side logic for a DHTMLX-based application.

dhtmlxConnector:

1. is a server-side library that lets you access external data sources and backend systems.
2. provides wide server-side functionality, such as data loading (static or dynamic), saving, filtering, validation etc.
3. consists of individual component-specific connectors. For a grid, you need to use GridConnector.
4. 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 "grid_server " folder and name it "data.php ".
6. Open the "data.php " file and add the following server-side code to it:
   
   

   "data.php" file

   <?php
   require_once("codebase/connector/grid_connector.php");//includes connector file 
   //connects to the database with the name "sampledb" 
   $res=new PDO("mysql:dbname=sampledb;host=localhost","user","password");
    
   $conn = new GridConnector($res);             //initializes the connector object
   $conn->render_table("books","id","title,quantity,price");  //loads data from db

   Make sure that all the includes used within the connector's script don't have any whitespaces beyond the <?php and ?> tags.
   The render_table method allows loading data from a single table. As parameters, the method takes: the table's name, the id field, a list of fields to load (used as values of the grid's cells).
   
   
7. Call the load() method to load data from the server to the grid:
   

"index.html" file

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

Back to top