UI Archives | phpGrid - PHP Datagrid

Tabbed Grid – Build a DataGrid With Tabs

Mon, 18 Jul 2016 11:56:41 +0000

Note that some features used in this demo are only supported in phpGrid Enterprise 6.9+.

Update:
The tabbed datagrid implementation has been simplified and improved to use a separate loader (tabbed_grid_loader.php) in which the table names are whitelisted. The table whitelist ensures only the specific database tables are allowed to be viewed.

We can use jQuery UI Tabs widget to build our datagrid with tabs. phpGrid already comes with the latest jQuery UI library.

First of all, let’s create our tabs. Each tab is a hyperlink with querystring to a database table name.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="tabs">
<ul>
<li><a href="#tabs-1">Orders</a></li>
<li><a href="?gn=employees">Employees</a></li>
<li><a href="?gn=products">Products</a></li>
<li><a href="?gn=customers">Customers</a></li>
<li><a href="?gn=suppliers">Suppliers</a></li>
</ul>

<div id="tabs-1" style="padding:0">

PLACEHOLDER - PHPGRID GOES HERE

</div>
</div>

Apply jQuery UI Tabs function to transform the above HTML to tabs.

1
2
3
4
5
6
7
8
9
10
11
12

$( function() {
$( "#tabs" ).tabs({
beforeLoad: function(event, ui) {
if(ui.panel.html() == ""){
ui.panel.html('

');
return true;
} else {
return false;
}
}
});
} );

The next step is to add the phpGrid code. The first tab will load from the “orders” database table. Note that the grid is not immediately displayed but delayed the render later inside the tab element.

We also didn’t include the primary key and table name in C_DataGrid construtor because we would like make the script as dynamic as possible. phpGrid will try to parse out the table name and primary key automatically (only supported in phpGrid Enterprise 6.9+).

1
2
3
4
5
6
7
8
9
10
11
12

// Always include namespace and conf.php on TOP of the script.
use phpCtrl\C_DataGrid;
require_once("/path/to/conf.php");

$tableName = (isset($_GET['gn']) && isset($_GET['gn']) !== '') ? $_GET['gn'] : 'orders';

$dg = new C_DataGrid("SELECT * FROM ". $tableName);
$dg->enable_edit()->set_dimension('1100');
$dg -> display(false);
$grid = $dg -> get_display(false);

$dg -> display_script_includeonce();

Update the tabs HTML to display the datagrid.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="tabs">
<ul>
<li><a href="#tabs-1">Orders</a></li>
<li><a href="tabbed_grid_loader.php?gn=employees">Employees</a></li>
<li><a href="tabbed_grid_loader.php?gn=products">Products</a></li>
<li><a href="tabbed_grid_loader.php?gn=customers">Customers</a></li>
<li><a href="tabbed_grid_loader.php?gn=suppliers">Suppliers</a></li>
</ul>

<div id="tabs-1" style="padding:0">

echo $grid;
?>
</div>
</div>

Finally, we tweak UI by adding CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.loading {
position: fixed;
top: 350px;
left: 50%;
margin-top: -96px;
margin-left: -96px;
opacity: .85;
border-radius: 25px;
width: 50px;
height: 50px;
}

#tabs ul{
width:1093px;

}
.ui-tabs-panel.ui-widget-content.ui-corner-bottom{
padding:0;
}

Our loader script: tabbed_grid_loader.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// companion loader file for tabbed_grid.php (Tabbed datagrid)

use phpCtrl\C_DataGrid;
require_once("/file/path/to/conf.php");

$tableName = (isset($_GET['gn']) && isset($_GET['gn']) !== '') ? $_GET['gn'] : 'orders';

// SECURITY CHECK
$tablesWhitelist = array('employees', 'products', 'customers', 'suppliers', 'orders');

if(!in_array($tableName, $tablesWhitelist))
die("The table $tableName is not whitelisted.");

$dg = new C_DataGrid("SELECT * FROM ". $tableName);
$dg->enable_edit()->set_dimension('1100');
$dg -> display();

That’s all there is to it!

Launch Demo!

The post Tabbed Grid – Build a DataGrid With Tabs appeared first on phpGrid - PHP Datagrid.

Mobile Device Optimized

Fri, 27 Feb 2015 12:30:10 +0000

Mobile Responsive UI

phpGrid has decent mobile device support. View the below demo on your mobile device such as iOS and Android phone. It’s recommended to set both autowidth and autoheight to true.

1	$dg -> enable_autowidth(true) -> enable_autoheight(true);

Required CSS – Replace “orders” with your own table name.

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

>
/* optional. removes page margin */
body{margin:0px;}
/* optional. widen textbox width */
.ui-jqgrid-bdiv input{width:100%;}

/* row height */

#gbox_orders table tr > th{
padding-top:10px;
padding-bottom:20px;
}

.ui-jqgrid .ui-jqgrid-htable th div{
height: 80px;
}

/* caption font size */
/* content font size */
#gbox_orders table, #gbox_orders table tr > th > div, #gview_orders > div.ui-jqgrid-titlebar > span{
font-size: 40pt;
}

#gview_orders > div.ui-jqgrid-titlebar{
padding: 20px;
}

#gview_orders input, #gview_orders textarea{
font-size: 40pt;
}
>

Lastly, insert meta viewport in head so that the page is rendered in a mobile view on mobile devices such as iPhone and Android phones.

1	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>

Live Demo (view it on mobile device or tablet)

The post Mobile Device Optimized appeared first on phpGrid - PHP Datagrid.

Column Chooser & Sortable Row

Thu, 17 Oct 2013 19:33:57 +0000

The example below demonstrates column chooser and sortable row features. Click on the column chooser icon in the footbar to reveal the column chooser dialog. To test sortable row, drag a row and move it around.

1
2
3
4
5
6
7
8
9
10
11

// Always include namespace and conf.php on TOP of the script.
use phpCtrl\C_DataGrid;
require_once("/file/path/to/conf.php");

$dg = new C_DataGrid("select * from products", "productCode", "products");

$dg -> enable_columnchooser(true);
$dg -> set_sortablerow(true);

$dg -> display();

See Live Example!

The post Column Chooser & Sortable Row appeared first on phpGrid - PHP Datagrid.

One Table, Multiple Datagrids

Thu, 17 Oct 2013 18:37:46 +0000

You can certain have more than one datagrid instances from the same database table. Just make sure to give each unique name using set_jq_gridName() method.

1
2
3
4
5
6
7
8
9
10
11
12
13

// Always include namespace and conf.php on TOP of the script.
use phpCtrl\C_DataGrid;
require_once("/file/path/to/conf.php");

$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg -> enable_edit();
$dg -> display();

$dg2 = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg2 -> set_jq_gridName('order2');
$dg2 -> set_caption("order 2");
$dg2 -> enable_edit();
$dg2 -> display();

See Live Example! (scroll to the right view the 2nd grid)

The post One Table, Multiple Datagrids appeared first on phpGrid - PHP Datagrid.

Horizontal Scroll

Sat, 14 Jan 2012 20:13:25 +0000

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
21
22
23
24

// Always include namespace and conf.php on TOP of the script.
use phpCtrl\C_DataGrid;
require_once("/file/path/to/conf.php");

$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!

The post Horizontal Scroll appeared first on phpGrid - PHP Datagrid.

Create Excel-Like, Responsive Grid

Sat, 14 Jan 2012 20:10:24 +0000

Expand to Current Window Width

Use enable_autowidth() and enable_autoheight() to set datagrid responsive with the page dimension to fill the entire screen, similar to Excel spreadsheet.

1
2
3
4
5
6
7
8

// Always include namespace and conf.php on TOP of the script.
use phpCtrl\C_DataGrid;
require_once("/file/path/to/conf.php");

$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg->enable_edit('INLINE', 'CRUD');
$dg->enable_autowidth(true)->enable_autoheight(true);
$dg->display();

Expand to Outer Container Width

By default, auto width function expands datagrid to fit the current window width. When the grid is insider another container, you need to add call setGridWidth() to adjust the width after the grid has been loaded.

1
2
3

$dg->before_script_end .= 'setTimeout(function(){$(window).bind("resize", function() {
phpGrid_orders.setGridWidth($("#mydiv").width());
}).trigger("resize");}, 0)';

Completely Hide the Horizontal Scrollbar

Add the following CSS to completely hide the horizontal scrollbar of the parent container. In this case, its id is “mydiv”.

1
2
3
4
5

>
#mydiv {
overflow-x: hidden;
}
>

Important:

“mydiv” is the id of parent DIV in which contains your grid.
“phpGrid_orders” is “phpGrid_” + your datagrid table name.

Hint:
Call enable_kb_nav() method to move between rows using only keyboard.

See Live Example! (Try to resize the window)

The post Create Excel-Like, Responsive Grid appeared first on phpGrid - PHP Datagrid.

Theme Roller *

Thu, 16 Sep 2010 23:31:58 +0000

* Please note this feature is only available in paid versions.
** Premium Themes are now available to commercial licenses customers

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
34
35
36
37

// Always include namespace and conf.php on TOP of the script.
use phpCtrl\C_DataGrid;
require_once("/file/path/to/conf.php");

$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!

The post Theme Roller * appeared first on phpGrid - PHP Datagrid.

Load Data with Vertical Scroll

Thu, 16 Sep 2010 00:26:45 +0000

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
31
32
33
34

// Always include namespace and conf.php on TOP of the script.
use phpCtrl\C_DataGrid;
require_once("/file/path/to/conf.php");

$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!

The post Load Data with Vertical Scroll appeared first on phpGrid - PHP Datagrid.