Live Examples
If you are new to phpGrid, we recommend that you go through the examples in the sequence provided. Please note, certain features, such as inline editing and delete, are disabled in live examples.
In addition to the examples, major phpGrid features can be seen in Screenshots page.
Example 1: A Basic PHP Datagrid
The basic PHP datagrid requires only as little as five lines of code. Foremostly, always create phpGrid object in the first line; then call its functional methods to define sql SELECT string, sql table name, sql primary key, and relative path to phpGrid; finally, always call display() to render output to screen.
Please note in some databases, such as Firebird, MS Access, the fields name are case-sensitive. Make sure the name used in the code matches the case when you are using those type of databases.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); $dg -> display();
Example 2: Give More Descriptive Column Headers
By default phpGrid pulls out the data field name defined in database as the header for each column. You can simply change the title using method set_col_title().
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles$dg -> set_col_title ("EmployeeId", "Employee ID");$dg -> set_col_title ("LastName", "Last Name");$dg -> set_col_title ("FirstName", "First Name");$dg -> display();
Example 3: Alternative Background and Mouseover Color
phpGrid also provides additional attributes and methods to color up display. Use set_alt_bgcolor() to define background color of the datagrid. The default is white. Separated the color by comma to have alternative color for each row. Additionally, Use set_onmouseover() Method for onmouseover effect. All of which requires no Javascript! Both hex and HTML color names (e.g Black, White) are valid inputs.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color$dg -> set_alt_bgcolor ("#ffcc99, #ffccdd");$dg -> set_onmouseover ("yellow");$dg -> display();
Example 4: Hide a Table Column
For columns need not to be shown, such as primary key, use method set_col_hidden to hide those columns.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column$dg -> set_col_hidden ("Notes");$dg -> display();
Example 6: Display Hyperlinks
Sometimes we would like to display certain data stored in database as hyperlinks links to other pages. It can be done easily with phpGrid.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column $dg -> set_col_hidden ("Notes"); // display image $dg -> set_col_img ("PhotoPath", "", "width:100px;"); // display URL as hyperlink$dg -> set_col_link ("ReportsTo","/query.php?EmployeeId=","EmployeeId","target='_new'");$dg -> display();
Example 6: Create Master - Detail, Parent - Child tables
Creating Master-Detail, or namely Parent-Child tables, is very easy with phpGrid. Simply pass the SQL Select and the foreign key to the method set_masterdetail(). Yes, it requires only one line of code. Please refer to online document for additional information on this method.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column $dg -> set_col_hidden ("Notes"); // create master/detail tables$dg -> set_masterdetail("SELECT * FROM Sales","employeeId"," AND price > 100");$dg -> display();
Example 7: Set Number of Rows to Display in a Page (Page Size)
For tables contain massive records, phpGrid have a built-in paging mechanism. Simply assign a page size integer to the parameter in set_page_size() method. Page navigation will show on top of the datagrid.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column $dg -> set_col_hidden ("Notes"); // display URL as hyperlink $dg -> set_col_link ("ReportsTo", "/query.php?EmployeeId=", "EmployeeId", "target='_new'"); // set page size$dg -> set_page_size(20);$dg -> display();
Example 8: Make Your PHP Datagrid Editable!
With a single line of code, your PHP datagrid becomes editable. By assigning true to the parameter of method set_allow_actions(), phpGrid automatically creates an action column with "View", "Edit", and "Delete" capability to the data source.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column $dg -> set_col_hidden ("Notes"); // display URL as hyperlink $dg -> set_col_link ("ReportsTo", "/query.php?EmployeeId=", "EmployeeId", "target='_new'"); // set page size $dg -> set_page_size(20); // make the datagrid editable$dg -> set_allow_actions(true);$dg -> display();
Example 9: Restrict Data Administrative Level
Using method set_action_type() to set data administrative level. Three administrative levels provided by phpGrid: View, Edit, and Delete.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column $dg -> set_col_hidden ("Notes"); // display URL as hyperlink $dg -> set_col_link ("ReportsTo", "/query.php?EmployeeId=", "EmployeeId", "target='_new'"); // set page size $dg -> set_page_size (20); // make the datagrid editable $dg -> set_allow_actions(true); // set data administrative level // "V" means View, "E" means Edit, and "D" means Delete.$dg -> set_action_type ("VE"); // view and edit only$dg -> display();
Example 10: Set Read Only Data Fields in Datagrid
Often during editing, you would like certain fields to be not editable, or ready only. You can call set_fields_readonly() and set those fields to be read only.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column $dg -> set_col_hidden ("Notes"); // display URL as hyperlink $dg -> set_col_link ("ReportsTo", "/query.php?EmployeeId=", "EmployeeId", "target='_new'"); // set page size $dg -> set_page_size (20); // make the datagrid editable $dg -> set_allow_actions(true); // set data administrative level // "V" means View, "E" means Edit, and "D" means Delete. $dg -> set_action_type ("VE"); // view and edit only // make BirthDate and HomePhone read only$dg -> set_fields_readonly("LastName, HomePhone");$dg -> display();
Example 11: Sum Up a Column in phpGrid
phpGrid supports common features used in spreadsheet program, such as sum up a column to produce a total. Pass value true to method set_col_sum_enabled(), then specifiy the name of the columns to sum, the datagrid will do the rest for you!
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column $dg -> set_col_hidden ("Notes"); // display URL as hyperlink $dg -> set_col_link ("ReportsTo", "/query.php?EmployeeId=", "EmployeeId", "target='_new'"); // set page size $dg -> set_page_size (20); // make the datagrid editable $dg -> set_allow_actions(true); // set data administrative level // "V" means View, "E" means Edit, and "D" means Delete. $dg -> set_action_type ("VE"); // view and edit only // make BirthDate and HomePhone read only $dg -> set_fields_readonly("LastName, HomePhone"); // sum up columns$dg -> set_col_sum_enabled(true);$dg -> set_col_sum ("Salary");$dg -> set_col_sum ("Age");$dg -> display();
Example 12: Add Additional Controls to Edit Form
Call add_control() to add additional HTML controls in the edit form.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column $dg -> set_col_hidden ("Notes"); // display URL as hyperlink $dg -> set_col_link ("ReportsTo", "/query.php?EmployeeId=", "EmployeeId", "target='_new'"); // set page size $dg -> set_page_size (20); // make the datagrid editable $dg -> set_allow_actions(true); // set data administrative level // "V" means View, "E" means Edit, and "D" means Delete. $dg -> set_action_type ("VE"); // view and edit only // make BirthDate and HomePhone read only $dg -> set_fields_readonly("LastName, HomePhone"); // sum up columns $dg -> set_col_sum_enabled(true); $dg -> set_col_sum ("Salary"); $dg -> set_col_sum ("Age"); // add Checkbox HTML control to status$dg -> add_control("Status",CHECKBOX,"parttime"=>"Part Time","contract"=>"Contract"),",");$dg -> display();
Example 13: AJAX-Enabled Inlined Editing
Inline editng works just like a spreadsheet. Set the first parameter in method set_inlineedit_enabled() to true to enable inline editing. When the second parameter is set to true, it turns the AJAX Auto-Save feature. The new value is automatically saved in database without clicking the Save button on the toolbar. The second parameter is default to true when omitted.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column $dg -> set_col_hidden ("Notes"); // display URL as hyperlink $dg -> set_col_link ("ReportsTo", "/query.php?EmployeeId=", "EmployeeId", "target='_new'"); // set page size $dg -> set_page_size (20); // make the datagrid editable $dg -> set_allow_actions(true); // set data administrative level // "V" means View, "E" means Edit, and "D" means Delete. $dg -> set_action_type ("VE"); // view and edit only // make BirthDate and HomePhone read only $dg -> set_fields_readonly("LastName, HomePhone"); // sum up columns $dg -> set_col_sum_enabled(true); $dg -> set_col_sum ("Salary"); $dg -> set_col_sum ("Age"); // add Checkbox HTML control to status $dg -> add_control("Status", CHECKBOX, array("fulltime"=>"Full Time", "parttime"=>"Part Time", "contract"=>"Contract"), ","); // turn on inline-editing with Ajax enabled$dg -> set_inlineedit_enabled(true, true);$dg -> display();
Example 14: Condition-Based Output
One handy feature that phpGrid offers is the condition-based output. Let's say, a boolean value stored in table is either 1 or 0. Often when display it needs to be translated too something more meaningful. Function set_col_txt() can be used in such situation. It overwrites text from the database based on conditions. For more information on how each parameter is used, please refer to the online document.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column $dg -> set_col_hidden ("Notes"); // display URL as hyperlink $dg -> set_col_link ("ReportsTo", "/query.php?EmployeeId=", "EmployeeId", "target='_new'"); // set page size $dg -> set_page_size (20); // make the datagrid editable $dg -> set_allow_actions(true); // set data administrative level // "V" means View, "E" means Edit, and "D" means Delete. $dg -> set_action_type ("VE"); // view and edit only // make BirthDate and HomePhone read only $dg -> set_fields_readonly("LastName, HomePhone"); // sum up columns $dg -> set_col_sum_enabled(true); $dg -> set_col_sum ("Salary"); $dg -> set_col_sum ("Age"); // add Checkbox HTML control to status $dg -> add_control("Status", CHECKBOX, array("fulltime"=>"Full Time", "parttime"=>"Part Time", "contract"=>"Contract"), ","); // turn on inline-editing with Ajax enabled // $dg -> set_inlineedit_enabled(true, true); // condition-based output$dg -> set_col_txt ("IsSeniorEmployee"," < 1", "YES", "NO",false);$dg -> display();
Example 15: Display Images
For data that stores a path to an image, you can use phpGrid method set_col_img() to display the actual image. The third parameter is used to set additional style to the image, such as border and width.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column $dg -> set_col_hidden ("Notes"); // display URL as hyperlink $dg -> set_col_link ("ReportsTo", "/query.php?EmployeeId=", "EmployeeId", "target='_new'"); // set page size $dg -> set_page_size (20); // make the datagrid editable $dg -> set_allow_actions(true); // set data administrative level // "V" means View, "E" means Edit, and "D" means Delete. $dg -> set_action_type ("VE"); // view and edit only // make BirthDate and HomePhone read only $dg -> set_fields_readonly("LastName, HomePhone"); // sum up columns $dg -> set_col_sum_enabled(true); $dg -> set_col_sum ("Salary"); $dg -> set_col_sum ("Age"); // add Checkbox HTML control to status $dg -> add_control("Status", CHECKBOX, array("fulltime"=>"Full Time", "parttime"=>"Part Time", "contract"=>"Contract"), ","); // turn on inline-editing with Ajax enabled // $dg -> set_inlineedit_enabled(true, true); // condition-based output $dg -> set_col_txt ("IsSeniorEmployee", " < 1", "YES", "NO", false); // display image$dg -> set_col_img ("PhotoPath", "", "width:50px;");$dg -> display();
Example 16: Change Overall Look and Feel with Theme
You can easily change phpGrid's look and feel with method set_theme() with pre-defined or user-defined themes. The theme files are located in include/theme folder. Simply pass the name of the theme folder to change the overall look and feel. You can even define your own theme if you are comfortable with CSS.
$dg = new C_DataGrid($hostName, $userName, $password, $dbName); $dg -> set_gridpath ("include/"); $dg -> set_sql ("SELECT * FROM Employees"); $dg -> set_sql_table ("Employees"); $dg -> set_sql_key ("EmployeeId"); // change column titles $dg -> set_col_title ("EmployeeId", "Employee ID"); $dg -> set_col_title ("LastName", "Last Name"); $dg -> set_col_title ("FirstName", "First Name"); // set background and mouse over color $dg -> set_alt_bgcolor ("#ffcc99, #ffccdd"); $dg -> set_onmouseover ("yellow"); // hide a column $dg -> set_col_hidden ("Notes"); // display URL as hyperlink $dg -> set_col_link ("ReportsTo", "/query.php?EmployeeId=", "EmployeeId", "target='_new'"); // set page size $dg -> set_page_size (20); // make the datagrid editable $dg -> set_allow_actions(true); // set data administrative level // "V" means View, "E" means Edit, and "D" means Delete. $dg -> set_action_type ("VE"); // view and edit only // make BirthDate and HomePhone read only $dg -> set_fields_readonly("LastName, HomePhone"); // sum up columns $dg -> set_col_sum_enabled(true); $dg -> set_col_sum ("Salary"); $dg -> set_col_sum ("Age"); // add Checkbox HTML control to status $dg -> add_control("Status", CHECKBOX, array("fulltime"=>"Full Time", "parttime"=>"Part Time", "contract"=>"Contract"), ","); // turn on inline-editing with Ajax enabled // $dg -> set_inlineedit_enabled(true, true); // condition-based output $dg -> set_col_txt ("IsSeniorEmployee", " < 1", "YES", "NO", false); // create master/detail tables $dg -> set_masterdetail("SELECT * FROM Sales", "employeeId", " AND price > 100"); // display image $dg -> set_col_img ("PhotoPath", "", "width:50px;"); // change theme$dg -> set_theme("Sweet");$dg -> display();




