Inline edit Archives | phpGrid - PHP Datagrid

Excel Editing

Fri, 17 Nov 2017 05:40:15 +0000

Set the edit type to CELL enables datagrid to behave like an Excel spreadsheet. It is advisable to also enable keyboard navigation with enable_kb_nav().

* Use keyboard arrow keys to navigate the table cell like Excel.
* Press Enter key to edit a cell. Enter again to save.
* While editing, press Tab key to move the next adjacent cell. Any changes are automatically saved.

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 orders", "orderNumber", "orders");
$dg->enable_autowidth(true)->enable_autoheight(true);
$dg->set_pagesize(100); // needs to be a large number
$dg->set_scroll(true);
$dg->enable_kb_nav(true);
$dg->enable_edit('CELL');
$dg -> display();

Live Demo!

The post Excel Editing appeared first on phpGrid - PHP Datagrid.

Row-level Edit Permission

Thu, 17 Oct 2013 18:05:31 +0000

Using actions column in the earlier example, it’s now possible to specify row-level edit permission for editing using additional javascript.

The Javascript used here hides the delete and edit buttons based condition that when status equals to “Shipped”. The example shown is for demo purpose only. It’s NOT 100% secure. Programmer should still check permission on the server side.

For simpler condition without using Javascript, you can consider set_edit_condition() method.

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");

// note this should not replace database role-based or user-based permissions.
$onGridLoadComplete = << function(status, rowid)
{
var ids = jQuery("#orders").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++)
{
var rowId = ids[i];
var rowData = jQuery('#orders').jqGrid ('getRowData', rowId);

if($("#orders").jqGrid("getCell", rowId, "status") == "Shipped"){
$("#orders").jqGrid("setCell", rowId, "actions", " zzz ", {"display":"none"}); // not possible to set value for virtual column
}
}
}
ONGRIDLOADCOMPLETE;

$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg->set_col_hidden('comments');

$dg->add_column("actions", array('name'=>'actions',
'index'=>'actions',
'width'=>'80',
'formatter'=>'actions',
'formatoptions'=>array('keys'=>true)),'Actions');
$dg->set_grid_property(array('onSelectRow'=>'')); // remove onSelect event
$dg->add_event("jqGridLoadComplete", $onGridLoadComplete);
$dg->enable_edit('INLINE');

$dg -> display();

See Live Example!

The post Row-level Edit Permission appeared first on phpGrid - PHP Datagrid.

Inline Edit Actions Column

Thu, 17 Oct 2013 17:44:53 +0000

Inline edit mode also comes with actions column with edit and delete buttons. Use add_column method to add “actions”. In formatoptions, specify the following property to display or hide edit and delete buttons:

delbutton – true or false
editbutton – true or false

Note that when use actions column, it is not necessary to specify edit options in enable_edit method. An advantage using actions column is that it’s possible to have row-level permission. Please see datagrid row-level edit permission example.

1
2
3

// 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");

// enable edit - but no need to specify 2nd parameter because we will be using actions column
$dg -> enable_edit("INLINE");

$dg->add_column("actions", array('name'=>'actions',
    'index'=>'actions',
    'width'=>'70',
    'formatter'=>'actions',
    'formatoptions'=>array('keys'=>true, 'editbutton'=>true, 'delbutton'=>false)),'Actions');

$dg -> display();

See Live Example!

The post Inline Edit Actions Column appeared first on phpGrid - PHP Datagrid.

set_edit_condition()

Fri, 11 Oct 2013 22:33:05 +0000

Parameters:
- $edit_conditoin: An array stores edit permission condition.
Description:
- Set row-level permission condition for editing.
Remark:
- This works for INLINE ONLY by hiding the edit icons using javascript, CSS
- For that reason, developers should still validate user permission at the database or on the server side.
- For complex conditions, use add_event and javascript. See row-level edit permission example.

Example:

1 2	$dg -> enable_edit('INLINE', 'CRUD'); $dg -> set_edit_condition(array('status' => '=="Shipped"', '&&', 'customerNumber' => '==114' ));

The above code snippet generates javascript that validates Status and customerNumber value. If both are true, the edit icon will appear.

The post set_edit_condition() appeared first on phpGrid - PHP Datagrid.

CRUD PHP Datagrid (Editable Datagrid) *

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

* CRUD PHP Datagrid 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. In FORM edit mode, double click triggers the popup edit window to display. In INLINE edit it is a single click to edit, similar to how Excel works. This is a design decision.

When edit is enabled in a grid, 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’.

1
2
3

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

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("FORM", "CRUD");

$dg -> display();

Update:

Beginning version 4.4, you can double click to edit whenever edit mode is enabled. The toolbar can also be moved to top with a little javascript. See KB “Move Toolbar to Top of the Grid“.

Run Live Demo!

The post CRUD PHP Datagrid (Editable Datagrid) * appeared first on phpGrid - PHP Datagrid.