by richard
on 07.04.10
in Examples
If you are new to phpGrid, we recommend that you go through the examples in the sequence provided for each section.
Before you begin, make sure that you have installed and configured phpGrid properly. phpGrid utilizes jQuery extensively, the popular cross-browser Javascript framework. The current phpGrid supports jQuery version 1.3.2. If you are already using jQuery but a different version, considering removing the existing jQuery to avoid version conflicts. If you have questions regarding this, please send us an email.
Please note, certain features, such as update, delete, and add new are disabled in online demo for security reason. In addition to the examples, major phpGrid features can be seen in Screenshots page.
by richard
on 07.05.10
in Examples
The basic PHP datagrid requires only as little as
TWO lines of code. Foremostly, always
create phpGrid object in the first line; then call its methods to define properties, and lastly always call
display() to render 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.
.
- parameter 1: SQL statement
- parameter 2: SQL primary key
- parameter 3: SQl table name
1
2
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg -> display(); |
See Live Example!
Programming Tip: Database Naming Standards
It’s generally not recommended to have dash or space character in naming database tables, or you must add surrounding quotes, or backticks to the table names or columns that have those characters in the query.
Underscore character, on the other hand, is generally accepted for naming convention.
Example:
1
2
| SELECT * FROM `my-table` -- requires ` around table name
SELECT * FROM my_table -- does not require surrounding quotes. |
by richard
on 09.15.10
in Examples
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().
1
2
3
4
5
6
7
8
9
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
// change column titles
$dg -> set_col_title("orderNumber", "Order No.");
$dg -> set_col_title("orderDate", "Order Date");
$dg -> set_col_title("shippedDate", "Shipped Date");
$dg -> set_col_title("customerNumber", "Customer No.");
$dg -> display(); |
See Live Example!
by richard
on 09.15.10
in Examples
For columns need not to be shown, such as primary key, use method set_col_hidden() to hide those columns.
1
2
3
4
5
6
7
8
9
10
11
12
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
// change column titles
$dg -> set_col_title("orderNumber", "Order No.");
$dg -> set_col_title("orderDate", "Order Date");
$dg -> set_col_title("shippedDate", "Shipped Date");
$dg -> set_col_title("customerNumber", "Customer No.");
// hide a column
$dg -> set_col_hidden("requiredDate");
$dg -> display(); |
See Live Example!
by richard
on 09.15.10
in Examples
By default, phpGrid displays table name as the caption. It can be changed using set_caption(). You can also hide the caption by using an empty string “” as the caption.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
// change column titles
$dg->set_col_title("orderNumber", "Order No.");
$dg->set_col_title("orderDate", "Order Date");
$dg->set_col_title("shippedDate", "Shipped Date");
$dg->set_col_title("customerNumber", "Customer No.");
// hide a column
$dg -> set_col_hidden("requiredDate");
// change default caption
$dg -> set_caption("Orders List");
$dg -> display(); |
See Live Example!
by richard
on 09.15.10
in Examples
phpGrid currently supports export in native Excel format and HTML format. When the export feature is enabled, phpGrid displays an export icon in the footer. Also see enable_export().
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
// change column titles
$dg->set_col_title("orderNumber", "Order No.");
$dg->set_col_title("orderDate", "Order Date");
$dg->set_col_title("shippedDate", "Shipped Date");
$dg->set_col_title("customerNumber", "Customer No.");
// hide a column
$dg -> set_col_hidden("requiredDate");
// change default caption
$dg -> set_caption("Orders List");
// set export type
$dg -> enable_export('EXCEL');
$dg -> display(); |
See Live Example!
by richard
on 09.15.10
in Examples
phpGrid includes integrated search. By default, this feature is not enabled. To enable search use enable_search() method with parameter set to true. Once enabled, the integrated search can be toggled with the search button on the footer.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| $dg = new C_DataGrid("SELECT * FROM Orders", "orderNumber", "Orders");
// change column titles
$dg->set_col_title("orderNumber", "Order No.");
$dg->set_col_title("orderDate", "Order Date");
$dg->set_col_title("shippedDate", "Shipped Date");
$dg->set_col_title("customerNumber", "Customer No.");
// hide a column
$dg -> set_col_hidden("requiredDate");
// change default caption
$dg -> set_captin("Orders List");
// set export type
$dg -> enable_export('EXCEL');
// enable integrated search
$dg -> enable_search(true);
$dg -> display(); |
See Live Example!
by richard
on 09.15.10
in Examples
Use set_dimension() method to specify data grid initial height and width. The default height and width is 400 by 300 pixels. In this example, the width is set to 800 pixel, and height is set to 600 pixel.
Wait, It looks funny! The datagrid height is taller than the space used by the number of rows in a page. To fix this, we can set a bigger pagination to accommodate a taller grid. See the next example on pagination.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
// change column titles
$dg->set_col_title("orderNumber", "Order No.");
$dg->set_col_title("orderDate", "Order Date");
$dg->set_col_title("shippedDate", "Shipped Date");
$dg->set_col_title("customerNumber", "Customer No.");
// hide a column
$dg -> set_col_hidden("requiredDate");
// change default caption
$dg -> set_caption("Orders List");
// set export type
$dg -> enable_export('EXCEL');
// enable integrated search
$dg -> enable_search(true);
// set height and weight of datagrid
$dg -> set_dimension(800, 600);
$dg -> display(); |
See Live Example!
by richard
on 09.15.10
in Examples
By default, the pagination size is 20. It means maximum of 20 records can be displayed in a page. This value can be easily changed with set_pagesize() method. Be aware that pagination is disabled when set_scroll() is set to true. See the next example on set_scroll() for more information.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
// change column titles
$dg->set_col_title("orderNumber", "Order No.");
$dg->set_col_title("orderDate", "Order Date");
$dg->set_col_title("shippedDate", "Shipped Date");
$dg->set_col_title("customerNumber", "Customer No.");
// hide a column
$dg -> set_col_hidden("requiredDate");
// change default caption
$dg -> set_caption("Orders List");
// set export type
$dg -> enable_export('EXCEL');
// enable integrated search
$dg -> enable_search(true);
// set height and weight of datagrid
$dg -> set_dimension(800, 600);
// increase pagination size to 40 from default 20
$dg -> set_pagesize(40);
$dg -> display(); |
See Live Example!
by richard
on 09.15.10
in Examples
In contrast to traditional pagination method to browse through data, you can use vertical scroll as alternative way to load data. It is done by set parameter in set_scroll() to true. When scroll position changes, phpGrid makes ajax call in the background and refresh the content in the grid. As a result, pagination is disabled automatically when this method is used.
Note that it does not load everything at once and only hold all the items from the start through to the latest point ever visited. This improves page loading time while prevents memory leaks from happening.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
// change column titles
$dg->set_col_title("orderNumber", "Order No.");
$dg->set_col_title("orderDate", "Order Date");
$dg->set_col_title("shippedDate", "Shipped Date");
$dg->set_col_title("customerNumber", "Customer No.");
// hide a column
$dg -> set_col_hidden("requiredDate");
// change default caption
$dg -> set_caption("Orders List");
// set export type
$dg -> enable_export('EXCEL');
// enable integrated search
$dg -> enable_search(true);
// set height and weight of datagrid
$dg -> set_dimension(800, 600);
// increase pagination size to 40 from default 20
$dg -> set_pagesize(40);
// use vertical scroll to load data
$dg -> set_scroll(true);
$dg -> display(); |
See Live Example!
by richard
on 09.16.10
in Examples
* Please note this feature is only available in paid versions.
The overall look and feel of the phpGrid can be easily changed using set_theme() method. The theme elements are completely customizable through CSS. Theme files, css and images, are stored in css folder.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
// change column titles
$dg->set_col_title("orderNumber", "Order No.");
$dg->set_col_title("orderDate", "Order Date");
$dg->set_col_title("shippedDate", "Shipped Date");
$dg->set_col_title("customerNumber", "Customer No.");
// hide a column
$dg -> set_col_hidden("requiredDate");
// change default caption
$dg -> set_caption("Orders List");
// set export type
$dg -> enable_export('EXCEL');
// enable integrated search
$dg -> enable_search(true);
// set height and weight of datagrid
$dg -> set_dimension(800, 600);
// increase pagination size to 40 from default 20
// $dg -> set_pagesize(40);
// use vertical scroll to load data
$dg -> set_scroll(true);
// change theme
$dg -> set_theme('dot-luv');
$dg -> display(); |
See Live Example!
by richard
on 09.16.10
in Examples
You can display the text in column as static hyperlink by calling set_col_link() and passing the column name. Note this method only display static URL stored in database field. To display dynamic URL links based in variables, see the next example on set_col_dynalink() method.
Please note we are using Products table in this example.
1
2
3
4
5
6
7
8
9
| $dg = new C_DataGrid("select * from products", "productCode", "productcode");
$dg -> set_col_title("productCode", "Product Code");
$dg -> set_col_title("productName", "Product Name");
$dg -> set_col_title("productLine", "Product Line");
// display static Url
$dg -> set_col_link("productUrl");
$dg -> display(); |
See Live Example!
by richard
on 09.16.10
in Examples
From example above, we learn that phpGrid can display simple, static URL using set_col_link() method. However, it is often for database drive webpage that URL is dynamically formed based on parameters value. Method set_col_dynalink() is designed specially for this purpose.
The following demonstrates passing the column orderNumber as the dynamic value used as part of the URL.
1
2
3
4
5
6
7
8
9
10
11
12
| $dg = new C_DataGrid("select * from products", "productCode", "productCode");
$dg -> set_col_title("productCode", "Product Code");
$dg -> set_col_title("productName", "Product Name");
$dg -> set_col_title("productLine", "Product Line");
// display static Url
$dg -> set_col_link("productUrl");
// display dynamic url. e.g.http://www.example.com/?productCode=101&foo=bar
$dg -> set_col_dynalink("productCode", "http://www.example.com/", "productCode", '&foo=bar');
$dg -> display(); |
See Live Example!
by richard
on 09.16.10
in Examples
phpGrid comes with several frequently used data formatter through set_col_format() method. Different data format has different format options. In most cases, users only need to set column formatting for “integer”, “number”, and “mail” using this method. For “currency’,”link”, and “showlink” formats, phpGrid provides a number of helper functions to make formatting simpler and easier. Refer to documentations on column formatter helper methods.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| $dg = new C_DataGrid ("select * from products", "productCode", "productCode");
$dg -> set_col_title("productCode", "Product Code");
$dg -> set_col_title("productName", "Product Name");
$dg -> set_col_title("productLine", "Product Line");
// display static Url
$dg -> set_col_link("productUrl");
// dynamic url. e.g.http://www.example.com/?productCode=101&foo=bar
$dg -> set_col_dynalink("productCode", "http://www.example.com/", "productCode", '&foo=bar');
// column format
$dg -> set_col_currency("buyPrice");
$dg -> set_col_format("quantityInStock", "integer", array("thousandsSeparator" => ",",
"defaultValue" => "0"));
$dg -> set_col_format("MSRP", 'currency', array("prefix" => "$",
"suffix" => '',
"thousandsSeparator" => ",",
"decimalSeparator" => ".",
"decimalPlaces" => '2',
"defaultValue" => '0.00'));
// the above line is equivalent to the following helper function
$dg -> set_col_currency("MSRP", "$", '', ",",".", "2", "0.00");
$dg -> display(); |
See Live Example!
by richard
on 09.16.10
in Examples
Display image is easy in phpGrid. Simply set the column name in set_col_img(), phpGrid will take care of the rest.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| $dg = new C_DataGrid ("select * from products", "productCode", "productCode");
$dg -> set_col_title("productCode", "Product Code");
$dg -> set_col_title("productName", "Product Name");
$dg -> set_col_title("productLine", "Product Line");
// display static Url
$dg -> set_col_link("productUrl");
// dynamic url. e.g.http://www.example.com/?productCode=101&foo=bar
$dg -> set_col_dynalink("productCode", "http://www.example.com/", "productCode", '&foo=bar');
// column format
$dg -> set_col_currency("buyPrice");
$dg -> set_col_format("quantityInStock", "integer", array("thousandsSeparator" => ",",
"defaultValue" => "0"));
$dg -> set_col_format("MSRP", 'currency', array("prefix" => "$",
"suffix" => '',
"thousandsSeparator" => ",",
"decimalSeparator" => ".",
"decimalPlaces" => '2',
"defaultValue" => '0.00'));
// the above line is equivalent to the following helper function
$dg -> set_col_currency("MSRP", "$", '', ",",".", "2", "0.00");
// display image
$dg -> set_col_img("Image");
$dg -> display(); |
See Live Example!
by richard
on 09.16.10
in Examples
When enabled, the small triangle icon is displayed at the right bottom corner of the php data grid. The grid can be resized by simply click and drag the icon using mouse. This is more convenient than setting the width and height in the code.
This function is currently in beta.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| $dg= new C_DataGrid ("select * from products", "productCode", "productCode");
$dg ->set_col_title("productCode", "Product Code");
$dg ->set_col_title("productName", "Product Name");
$dg ->set_col_title("productLine", "Product Line");
// display static Url
$dg ->set_col_link("productUrl");
// dynamic url. e.g.http://www.example.com/?productCode=101&foo=bar
$dg -> set_col_dynalink("productCode", "http://www.example.com/", "productCode", '&foo=bar');
// column format
$dg -> set_col_currency("buyPrice");
$dg -> set_col_format("quantityInStock", "integer", array("thousandsSeparator" => ",",
"defaultValue" => "0"));
$dg -> set_col_format("MSRP", 'currency', array("prefix" => "$",
"suffix" => '',
"thousandsSeparator" => ",",
"decimalSeparator" => ".",
"decimalPlaces" => '2',
"defaultValue" => '0.00'));
// the above line is equivalent to the following helper function
$dg -> set_col_currency("MSRP", "$", '', ",",".", "2", "0.00");
// display image
$dg -> set_col_img("Image");
// enable resize by dragging mouse
$dg -> enable_resize(true);
$dg -> display(); |
See Live Example!
by richard
on 09.16.10
in Examples
* Please note this feature is only available in paid versions.
The PHP datagrid is not editable by default. You can enable edit by simply calling enable_edit(). Currently, two types of edit modes are supported, FORM edit and INLINE. When Form edit mode is used, additional icons appear in the data grid footer for editing. When set to inline mode, the cells in the selected row become editable, and must press Enter key to save changes. Only a single row can be edited for either mode.
When edit is enabled, all of the CRUD operations, Create, Read, Update, and Delete, are supported by default. You can restrict types of edit operations permitted by specifying the second parameter in enable_edit(). For example, to disallow Delete, change it to $operations=’CRU’.
Please note save is disabled in the online demo for security reason.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
// change column titles
$dg -> set_col_title("orderNumber", "Order No.");
$dg -> set_col_title("orderDate", "Order Date");
$dg -> set_col_title("shippedDate", "Shipped Date");
$dg -> set_col_title("customerNumber", "Customer No.");
// hide a column
$dg -> set_col_hidden("requiredDate");
// enable edit
$dg -> enable_edit("INLINE", "CRUD");
$dg -> display(); |
See Live Example!
Note: beginning version 4.4, you can double click to edit whenever edit mode is enabled.
by richard
on 09.16.10
in Examples
Sometimes we don’t want certain fields to be editable, then we can use set_col_readonly() method.
Note that you can set more than one columns to be read only using this method.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| $dg = new C_DataGrid("SELECT * FROM Orders", "orderNumber", "Orders");
// change column titles
$dg -> set_col_title("orderNumber", "Order No.");
$dg -> set_col_title("orderDate", "Order Date");
$dg -> set_col_title("shippedDate", "Shipped Date");
$dg -> set_col_title("customerNumber", "Customer No.");
// enable edit
$dg ->enable_edit("INLINE", "CRUD");
// hide a column
$dg -> set_col_hidden("requiredDate");
// read only columns, one or more columns delimited by comma
$dg -> set_col_readonly("orderDate, customerNumber");
$dg -> display(); |
Click on row to see the fields that are set to read only.
See Live Example!
by richard
on 09.16.10
in Examples
To set fields as required during edit, use set_col_required() method. If required fields are left blank, an “* required” message will be displayed. One more more columns can be specified as required fields in this method.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| $dg = new C_DataGrid("SELECT * FROM Orders", "orderNumber", "Orders");
// change column titles
$dg -> set_col_title("orderNumber", "Order No.");
$dg -> set_col_title("orderDate", "Order Date");
$dg -> set_col_title("shippedDate", "Shipped Date");
$dg -> set_col_title("customerNumber", "Customer No.");
// enable edit
$dg -> enable_edit("INLINE", "CRUD");
// hide a column
$dg -> set_col_hidden("requiredDate");
// read only columns, one or more columns delimited by comma
$dg -> set_col_readonly("orderDate, customerNumber");
// required fields
$dg -> set_col_required("orderNumber, customerNumber");
$dg -> display(); |
See Live Example!
To test, click on any row to toggle inline edit, leave a required fields blank, then hit Enter.
by richard
on 09.16.10
in Examples
You can select multiple records with set_multiselect() method. When multiselect is enabled, a checkbox is shown to the left of each row. It is currently designed to delete multiple records. More functionalities will be added to multiselect in the future.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| $dg = new C_DataGrid("SELECT * FROM Orders", "orderNumber", "Orders");
// change column titles
$dg -> set_col_title("orderNumber", "Order No.");
$dg -> set_col_title("orderDate", "Order Date");
$dg -> set_col_title("shippedDate", "Shipped Date");
$dg -> set_col_title("customerNumber", "Customer No.");
// enable edit
$dg -> enable_edit("INLINE", "CRUD");
// hide a column
$dg -> set_col_hidden("requiredDate");
// read only columns, one or more columns delimited by comma
$dg -> set_col_readonly("orderDate, customerNumber");
// required fields
$dg -> set_col_required("orderNumber, customerNumber");
// multiple select
$dg -> set_multiselect(true);
$dg -> display(); |
See Live Example!
by richard
on 09.16.10
in Examples
After enabling edit, you can set the type of HTML control with set_col_edittype() for any editable column used. List of Available controls are:
- text
- textarea
- select
- checkbox
- password
Text and textarea are set automatically based on the database access library ADOdb metatype as the default edit control.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| $dg = new C_DataGrid("select * from employees", "employeeNumber", "Employees");
$dg -> set_col_title("employeeNumber", "Emp No.");
$dg -> set_col_title("lastName", "Last Name");
$dg -> set_col_title("firstName", "First Name");
$dg -> set_col_title("isActive", "Active?");
$dg -> set_col_format("email", "email");
$dg -> enable_edit("FORM", "CRUD");
$dg -> set_row_color("","","#DDEEF5");
$dg -> set_col_hidden('employeeNumber',false);
$dg -> set_col_edittype("isActive", "checkbox","1:0");
$dg -> set_col_edittype("officeCode", "select", "1:San Francisco;2:Boston;3:NYC;4:Paris;5:Tokyo;6:Sydney;7:London");
// alternatively, bind dropdown menu to a lookup table this way
// $dg -> set_col_edittype("officeCode", "select", "Select officeCode,city from offices",false);
$dg -> display(); |
See Live Example!
by richard
on 09.16.10
in Examples
* Please note this feature is only available in paid versions.
The phpGrid went extra miles to make creating the master detail datagrid a super simple task. There is essentially a simple function to set_masterdetail() to set the master detail relationship between two datagrids, and have them work interactively.
The detail grid is a regular phpGrid object and can have the same methods like any other datagrid, such as description title, sort, and update etc. The detail grid renders dynamically based on the row selected in parent grid. A master grid can have one detail grid one or more detail datagrids.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| $dg = new C_DataGrid ("SELECT * FROM Orders", "orderNumber", "Orders");
// change column titles
$dg->set_col_title("orderNumber", "Order No.");
$dg->set_col_title("orderDate", "Order Date");
$dg->set_col_title("shippedDate", "Shipped Date");
$dg->set_col_title("customerNumber", "Customer No.");
// enable edit
$dg->enable_edit("INLINE", "CRUD");
// hide a column
$dg -> set_col_hidden("requiredDate");
// read only columns, one or more columns delimited by comma
$dg -> set_col_readonly("orderDate, customerNumber");
// required fields
$dg -> set_col_required("orderNumber, customerNumber");
// multiple select
$dg -> set_multiselect(true);
// second grid as detail grid. Notice it is just another regular phpGrid with properites.
$sdg = new C_DataGrid("SELECT orderNumber,productCode,quantityOrdered,priceEach FROM OrderDetails", "orderNumber", "OrderDetails");
$sdg->set_col_title("orderNumber", "Order No.");
$sdg->set_col_title("productCode", "Product Code");
$sdg->set_col_title("quantityOrdered", "Quantity");
$sdg->set_col_title("priceEach", "Unit Price");
$sdg->set_col_dynalink("productCode", "http://www.example.com/", "orderLineNumber", '&foo');
$sdg->set_col_format('orderNumber','integer', array('thousandsSeparator'=>'','defaultValue'=>''));
$sdg->set_col_currency('priceEach','$');
// define master detail relationship by passing the detail grid object as the first parameter, then the foriegn key name.
$dg->set_masterdetail($sdg, 'orderNumber');
$dg->display(); |
See Live Example!
by richard
on 09.16.10
in Examples
Defining a subgrid is essentially the same as setting up the master detail grid as described in our previous example. Again, only a single line of code change is required by calling set_subgrid().
The difference between a master detail datagrid and a subgrid is that the subgrid displays simple read-only inline grid rather than in a separate datagrid.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| $dg = new C_DataGrid("SELECT * FROM Orders", "orderNumber", "Orders");
// change column titles
$dg->set_col_title("orderNumber", "Order No.");
$dg->set_col_title("orderDate", "Order Date");
$dg->set_col_title("shippedDate", "Shipped Date");
$dg->set_col_title("customerNumber", "Customer No.");
// enable edit
$dg->enable_edit("INLINE", "CRUD");
// hide a column
$dg -> set_col_hidden("requiredDate");
// read only columns, one or more columns delimited by comma
$dg -> set_col_readonly("orderDate, customerNumber");
// required fields
$dg -> set_col_required("orderNumber, customerNumber");
// multiple select
$dg -> set_multiselect(true);
// second grid as detail grid. Notice it is just another regular phpGrid with properites.
$sdg = new C_DataGrid("SELECT orderNumber,productCode,quantityOrdered,priceEach FROM OrderDetails", "orderNumber", "OrderDetails");
$sdg->set_col_title("orderNumber", "Order No.");
$sdg->set_col_title("productCode", "Product Code");
$sdg->set_col_title("quantityOrdered", "Quantity");
$sdg->set_col_title("priceEach", "Unit Price");
// define master detail relationship by passing the detail grid object as the first parameter, then the foreign key name.
$dg->set_subgrid($sdg, 'orderNumber');
$dg->display(); |
See Live Example!
by richard
on 09.16.10
in Examples
Did you know it is possible to have multiple editable grids in a single page? No need to separate your data management into multiple pages. You can now performa all your content administrative tasks in one page.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $dg = new C_DataGrid("SELECT * FROM Orders", "orderNumber", 'Orders');
$dg->display();
$dg2 = new C_DataGrid("select * from employees", "employeeNumber", "Employees");
$dg2->display();
$dg3 = new C_DataGrid("select * from offices", "officeCode", "Offices");
$dg3->display();
$dg4 = new C_DataGrid("select * from productlines", "productLine", "ProductLines");
$dg4->display();
$dg5 = new C_DataGrid("select * from customers", "customerNumber", "Customers");
$dg5->display(); |
See Live Example!
by richard
on 02.09.11
in Examples
* Please note this feature is only available in paid versions.
phpGrid can group data by columns. Simply define a column name on which grouping occur using method set_group_properties().
In addition to define grouping column, set summary field using method set_group_summary() by passing the column name and summary type, which can be sum, count, avg, min, or max.
1
2
3
4
5
6
7
| $dg = new C_DataGrid("SELECT * FROM payments", "customerNumber", "orders");
$dg->set_group_properties('customerNumber');
$dg->set_group_summary('amount','sum');
$dg->set_group_summary('checkNumber','count');
$dg -> display(); |
See Live Example!
by richard
on 02.10.11
in Examples
* Please note this feature is only available in paid versions.
phpGrid supports a master grid with multiple detail grids. There is no limit on how many detail grids a master datagrid can have. Detail grids are defined the way as the master datagrid does. Click on example link to see it in action!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| //suppliers master-detail
$sg = new C_DataGrid("SELECT * FROM suppliers","supplierCode","suppliers");
$sg->set_sql_key("supplierName");
//supplier detail 1: product lines
$sg_d1 = new C_DataGrid("SELECT * FROM supplierproductlines","supplierCode","product lines");
$sg->set_masterdetail($sg_d1, 'supplierName');
//supplier detail2: products
$sg_d2 = new C_DataGrid("SELECT productCode,productName,productDescription,quantityInStock,MSRP,productVendor FROM products","productCode","products");
//set detail 2 for suppliers
$sg->set_masterdetail($sg_d2, 'productVendor');
$sg->display(); |
See Live Example!
by richard
on 02.20.11
in Examples
* Please note this feature is only available in paid versions.
The master detail datagrid can be nested to show relationships for multilevel hierarchal data. The example shows only three levels, though the number of nested levels can be unlimited.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| //suppliers master-detail
$sg = new C_DataGrid("SELECT * FROM suppliers","supplierCode","suppliers");
$sg->set_sql_key("supplierName");
//supplier detail2: products
$sg_d1 = new C_DataGrid("SELECT productCode,productName,productDescription,quantityInStock,MSRP,productVendor FROM products","productCode","products");
//nested grid-level 3 for products
$sg_d1_n1 = new C_DataGrid("SELECT * FROM productparts","productCode","productparts");
//set detail for products
$sg_d1->set_masterdetail($sg_d1_n1, 'productCode');
//set detail 2 for suppliers
$sg->set_masterdetail($sg_d1, 'productVendor');
$sg->display(); |
Note:
in example, click on #4 on suppliers, then S10_4698 in the first detail grid to reveal the third nested detail grid.
See Live Example!
by richard
on 03.29.11
in Examples
If you are using phpGrid in a language rather English, you may want the datagrid to display appropriate system text used by phpGrid such as “Submit”, “Next”, “Page”, “Find” etc. The language locale files are located in js\src\i18n directory.
1
2
3
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg->set_locale('fr');
$dg -> display(); |
See Live Example!
by richard
on 03.29.11
in Examples
* Please note this feature is only available in paid versions.
phpGrid nows supports data source from more than one database on a single page. Simply use the 4th parameter in constructor (C_DataGrid) to overwrite the initial database settings in conf.php.
In the following example, grid A binds a table from one database, while grid B binds another table from a completely different database, all on the same page.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $gridA = new C_DataGrid ("SELECT * FROM orders", "orderNumber", "orders");
$gridA->enable_edit("INLINE","CRUD");
$gridA -> display();
// overwrite database settings with another database.
$gridB = new C_DataGrid("SELECT * FROM names", "id", "names",
array("hostname"=>"localhost",
"username"=>"root",
"password"=>"",
"dbname"=>"utf8db",
"dbtype"=>"mysql",
"dbcharset"=>"utf8"));
$gridB->enable_edit("INLINE","CRUD");
$gridB -> display(); |
See Live Example!
by richard
on 03.29.11
in Examples
If database is created in charset other than default charset, e.g. “latin1″, some characters may be displayed as “?” in the grid. To properly display non-English characters, such as Spanish, Fresh, or Chinese, in MySQL, PostgreSQL, and Oracle you can define the character set value in ‘DB_CHARSET’ variable in conf.php.
In conf.php, set the DB_CHARSET to the corresponding charsets in your database.
1
2
3
4
5
6
| define('DB_HOSTNAME','hostname'); // database host name
define('DB_USERNAME', 'username'); // database user name
define('DB_PASSWORD', 'password'); // database password
define('DB_NAME', 'sampledb'); // database name
define('DB_TYPE', 'mysql'); // database type
define('DB_CHARSET','utf8'); // OPTIONAL. Leave blank to use the default charset |
Add the Meta element to the HTML head node and set character encoding to UTF-8. Note it’s important that the actual file must also be saved as UTF-8 encoding.
1
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
See Live Example!
by richard
on 01.14.12
in Examples
Bar chart is a great way to visualize numeric data. phpGrid now supports bar chart natively without 3rd party plugin using set_databar() method. You can have multiple data bar in a datagrid.
For complex data visualization, we recommend PHP Chart. Please visit PHP Chart for live demo.
1
2
3
4
5
6
7
8
9
10
11
12
| $dg = new C_DataGrid("SELECT * FROM joborders", "jobNumber", "joborders");
$dg -> set_col_title("jobNumber", "Job Number");
$dg -> set_col_title("jobDescription", "Description");
$dg -> set_col_title("status", "Status");
$dg -> set_col_title("percentComplete", "Progress (%)");
$dg -> set_col_title("isClosed", "Closed");
$dg -> set_databar("percentComplete","blue");
$dg -> set_databar("jobNumber","blue");
$dg -> enable_edit("INLINE", "CRUD");
$dg -> display(); |
See Live Example!
by richard
on 01.14.12
in Examples
* Please note this feature is not available in Lite and Basic versions.
Conditional Value is similar to conditional format (see set_conditional_format but with simplier set of features. Use set_conditional_value() to dynamically display a value when specific condition is met. The conditional value can be text, HTML, or even CSS style.
You can use conditional value with data bar in the same grid.
1
2
3
4
5
6
7
8
| .tstyle
{
display:block;background-image:none;margin-right:-2px;margin-left:-2px;height:14px;padding:5px;background-color:green;color:navy;font-weight:bold
}
.fstyle
{
display:block;background-image:none;margin-right:-2px;margin-left:-2px;height:14px;padding:5px;background-color:yellow;color:navy
} |
PHP Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| $dg = new C_DataGrid ("SELECT * FROM joborders", "jobNumber", "joborders");
$dg -> set_col_title("jobNumber", "Job Number");
$dg -> set_col_title("jobDescription", "Description");
$dg -> set_col_title("status", "Status");
$dg -> set_col_title("percentComplete", "Progress (%)");
$dg -> set_col_title("isClosed", "Closed");
$dg->set_conditional_value("isClosed", "==1", array(
"TCellValue"=>"<img src='SampleImages/checked.gif' />",
"FCellValue"=>"<img src='SampleImages/unchecked.gif' />"));
$dg->set_conditional_value("status", "=='Complete'", array(
"TCellStyle"=>"tstyle",
"FCellStyle"=>"fstyle"));
$dg->enable_edit('INLINE', 'CRUD');
$dg->set_multiselect(true);
$dg -> set_databar("percentComplete","red");
$dg -> display(); |
See Live Example!
by richard
on 01.14.12
in Examples
Use enable_autowidth() to set datagrid width as the same as the current page width.
1
2
3
4
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg->enable_edit('FORM', 'CRUD');
$dg->enable_autowidth(true);
$dg -> display(); |
See Live Example!
by richard
on 01.14.12
in Examples
Set parameter $shrinkToFit in set_dimension() to false to enable horizontal scroll when the container width is less than the grid width. The scroll bar will not show when the grid width is equal or less than the container width.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
// change column titles
$dg -> set_col_title("orderNumber", "Order No.");
$dg -> set_col_title("orderDate", "Order Date");
$dg -> set_col_title("shippedDate", "Shipped Date");
$dg -> set_col_title("customerNumber", "Customer No.");
// hide a column
$dg -> set_col_hidden("requiredDate");
// change default caption
$dg -> set_caption("Orders List");
// set export type
$dg -> enable_export('EXCEL');
// enable integrated search
$dg -> enable_search(true);
// set height and weight of datagrid
$dg -> set_dimension(800, 600, false);
// increase pagination size to 40 from default 20
$dg -> set_pagesize(40);
$dg -> display(); |
See Live Example!
by richard
on 01.14.12
in Examples
* Please note this feature is not available in Lite and Basic versions.
Conditional formatting example using set_conditional_format() method.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $dg = new C_DataGrid ("SELECT * FROM orders", "orderNumber", "orders");
//Format a cell based on the specified condition
$dg->set_conditional_format("orderNumber","CELL",array(
"condition"=>"eq","value"=>"10107","css"=> array("color"=>"#ffffff","background-color"=>"green")));
$dg->set_conditional_format("customerNumber","CELL",array(
"condition"=>"eq","value"=>"141","css"=> array("color"=>"red","background-color"=>"#DCDCDC")));
// Format a row based on the specified condition
$dg->set_conditional_format("comments","ROW",array(
"condition"=>"cn","value"=>"request","css"=> array("color"=>"white","background-color"=>"#4297D7")));
$dg->set_multiselect(true);
$dg -> display(); |
See Live Example!
