Now, we will create a grid on the page and populate it with data. Our grid will have 3 columns: Name, Quantity, Price.
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 ).
<html> <head> <title>Binding a form to a grid</title> <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css"> <script src="codebase/dhtmlx.js"></script> </head> <body> <div id="mygrid_container" style="width:600px;height:160px;float:left;"> </div> </body> </html>
It's important to set ids for the columns cause we will need them to bind a form to the grid.
var mygrid = new dhtmlXGridObject("mygrid_container"); //creates a grid object mygrid.setImagePath("codebase/imgs/"); //sets the path to the source images mygrid.setHeader("Name,Quantity,Price"); //sets the header labels mygrid.setColumnIds("fname,lname,email"); //sets the columns' ids mygrid.init(); //renders the grid on the page
Make sure that all the includes used within the connector's script don't have any whitespaces beyond the <?php and ?> tags.
<?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
mygrid.load("griddata.php"); //takes the path to your data feed
Back to top