5.0 Archives | phpGrid - PHP Datagrid

Hyperlink to Call JavaScript Function

Sun, 15 Jul 2012 20:59:37 +0000

You can show hyperlink using set_col_link for static link or set_col_dynalink for dynamic link. What about if you want to do something even fancier, like open a new window, or trigger a JavaScript event when hyperlink is clicked?

To call JavaScript function on hyperlink click, use “showlink” in set_col_format method.

In the following example, the first set_col_format displays text in alert window using JavaScript function “myFunction” to retrieved text from a different cell in the same row. The second does a phpgrid.com site search using jQuery Ajax function “phpGridSiteAjaxSearch”, and displays the result in a alert message window.

PHP:

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

// 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 -> set_col_title("productCode", "Product Code");
$dg -> set_col_title("productName", "Product Name");
$dg -> set_col_title("productLine", "Product Line");

$dg->set_col_format("productLine", "showlink", array("baseLinkUrl"=>"javascript:", "target"=>"_self",
"showAction"=>"myFunction(jQuery('#products'),'",
"addParam"=>"');"));

$dg->set_col_format("productName", "showlink", array("baseLinkUrl"=>"javascript:", "target"=>"_self",
"showAction"=>"phpGridSiteAjaxSearch(jQuery('#products'),'",
"addParam"=>"');"));
$dg -> display();

JavaScript:

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

myFunction = function(grid, param) {
var ar = param.split('=');
if (grid.length > 0 && ar.length === 2 && ar[0] === '?id') {
var rowid = ar[1];
var prodDesc = grid.getCell(rowid, 'productDescription');

alert(prodDesc);
}
};

phpGridSiteAjaxSearch = function(grid, param) {
var ar = param.split('=');
if (grid.length > 0 && ar.length === 2 && ar[0] === '?id') {
var rowid = ar[1];
var productName = grid.getCell(rowid, 'productName');

jQuery.ajax({
url: 'https://phpgrid.com',
data: {
s: productName
},
type: 'GET',
dataType: 'text',
success: function(data, status) {
// your code goes here for a successul Ajax call .e.g open a new window
alert(data);
},
error: function(data, status, err) {
alert(data + status);
}
});
}
};

See Live Example

The post Hyperlink to Call JavaScript Function appeared first on phpGrid - PHP Datagrid.

add_event()

Sun, 15 Jul 2012 04:59:05 +0000

Parameter(s):
- $event_name: Event name from one of the following available events
  - - jqGridAfterAddRow
    - jqGridAfterChangeRowid
    - jqGridAfterDelRow
    - jqGridAfterInsertRow
    - jqGridAfterLoadComplete
    - jqGridAfterSetRow
    - jqGridAfterResizeDblClick
    - jqGridBeforeInitGrid
    - jqGridBeforeProcessing
    - jqGridBeforeRequest
    - jqGridBeforeSelectRow
    - jqGridGridComplete
    - jqGridLoadBeforeSend
    - jqGridLoadComplete
    - jqGridDblClickRow
    - jqGridHeaderClick
    - jqGridInitGrid
    - jqGridPaging
    - jqGridRightClickRow
    - jqGridSelectAll
    - jqGridSelectRow
    - jqGridShowHideCol
    - jqGridSortCol
    - jqGridRemapColumns
    - jqGridResizeDblClick
    - jqGridResizeStart
    - jqGridResizeStop
    - jqGridResetFrozenHeights
    - jqGridGroupingClickGroup
    - jqGridAddEditAfterClickPgButtons
    - jqGridAddEditAfterComplete
    - jqGridAddEditAfterShowForm
    - jqGridAddEditAfterSubmit
    - jqGridAddEditBeforeCheckValues
    - jqGridAddEditBeforeInitData
    - jqGridAddEditBeforeShowForm
    - jqGridAddEditBeforeSubmit
    - jqGridAddEditClickPgButtons
    - jqGridAddEditClickSubmit
    - jqGridAddEditInitializeForm
    - jqGridAddEditSerializeEditData
    - jqGridViewBeforeInitData
    - jqGridViewBeforeShowForm
    - jqGridDeleteAfterShowForm
    - jqGridAddEditAfterComplete
    - jqGridDeleteBeforeInitData
    - jqGridDeleteBeforeShowForm
    - jqGridAfterDelRow
    - jqGridFilterAfterChange
    - jqGridFilterAfterShow
    - jqGridFilterInitialize
    - jqGridFilterBeforeShow
    - jqGridInlineBeforeAddRow
    - jqGridInlineBeforeCancelRow
    - jqGridInlineBeforeEditRow
    - jqGridInlineBeforeSaveRow
    - jqGridInlineAfterRestoreRow
    - jqGridInlineEditRow
    - jqGridInlineSaveRowValidation
    - jqGridInlineAfterSaveRow
    - jqGridInlineSerializeSaveData
    - jqGridInlineSuccessSaveRow
    - jqGridInlineErrorSaveRow
    - jqGridBeforeEditCell
    - jqGridAfterEditCell
    - jqGridSerializeSubGridData
    - jqGridSubGridBeforeCollapse
    - jqGridSubGridBeforeExpand
    - jqGridSubGridRowExpanded
- $js_event_handler: JavaScript event handler to the specified event
Description:
- Custom event handler. A list of jqGrid events and parameters.
Remark:
- This is an advanced method. The event handlers are essentially JavaScript.
- Native javascript events are always supported.
Example:
- https://phpgrid.com/example/custom-event-handler/

You can also add event handler directly, even add additional event handler. The following adds dropdown ‘change’ event handler when the edit form shows.

1
2
3
4
5
6
7
8
9
10
11

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

Method Chaining

Sat, 14 Jul 2012 17:22:56 +0000

Method chaining is now supported starting version 5.0. It’s not required, but it provides more readable code and reduce amount of source code in a fluent interface.

For example:

With method chaining (v5.0 and later):

1 2	$dg->set_col_title(“lastName”, “Last Name”)->set_col_required(“lastName”, true)->set_co_default(“lastName”, “Robert”); $dg->enable_edit(“FORM”)->enable_export(true)->enable_resize(true);

Without method chaining:

1
2
3
4
5
6

$dg -> set_col_title(“lastName”, “Last Name”);
$dg -> set_col_required(“lastName”, true);
$dg -> set_co_default(“lastName”, “Robert”);
$dg -> enable_edit(“FORM”);
$dg -> enable_export(true);
$dg -> enable_resize(true);

The post Method Chaining appeared first on phpGrid - PHP Datagrid.

set_col_property()

Sat, 14 Jul 2012 17:19:26 +0000

Parameters:
- $col_name: column name
- $property: An array represents the column properties. List of available properties (http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options)
Description:
- This method allows you to directly manipulate column properties. Since column properties are an array, you can directly change the properties. This is more “closer to the metal” for users who are already familiar with jqGrid colMdel API.
Remark:

This is an advanced method. In most cases, you don’t need to call this method. It does not replace existing helper functions such as set_col_date, set_col_currency, etc. We suggest you use those helper functions if you are new to phpGrid.
This method is also used to create custom formatter. See a custom formatter example using this method.

Example:

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

$dg -> set_col_property("orderNumber", array("name"=>"Order Number", "width"=>40));
$dg -> set_col_property("orderDate",
array("formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d","newformat"=>"m/d/Y"))); // display different time format

// Display time only. No date. It cannot be edited, so we also made it hidden on the edit form.
$dg -> set_col_property("shippedDate",
array("formatter"=>"date",
"formatoptions"=>array("srcformat"=>"ISO8601Short","newformat"=>"g:i A"),
'editable'=>false,'hidedlg'=>true));

// currency format
$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'));

Custom Formatter/Unformatter Example

PHP

1
2
3
4
5
6
7

$dg -> set_col_property('rating',
array("classes"=>'ratingcol',
"sorttype"=>"number",
"formatter"=>"###ratingformatter###",
"unformat"=>"###unformathtml###"));

...

JavaScript

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

// Formatter JavaScript
function ratingformatter(cellValue, options, rowdata)
{
output = '';
width = Math.max(2, 14 * Math.min(5, Math.max(0, cellValue)));
output += '

+ width + 'px;">

';
output += '

' + cellValue + '

';
output += "";
return output;
}

// The corresponding unformatter JavaScript function
function unformathtml(cellValue, options, cellObject)
{
html = $(cellObject).html();
quotestart = html.indexOf("");
output = html.substring(quotestart + 4, quoteend);
return output;
}

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

set_col_edit_dimension()

Sat, 14 Jul 2012 06:09:08 +0000

Parameters:
- $col_name: column name
- $size/$cols: If the column is a text box, it’s the size that represents number of characters. If the column is a textarea, it’s the value for cols attribute in textarea.
- $rows: Optional. Number of rows in a textarea
Description:
- Set input text box size or textarea cols and rows values in edit form.
Remark:

To set dimension for entire edit form, use set_form_dimension()

Example:

1
2
3
4
5

// status is a text fields, 40 indicates the text field is 40 characters long.
$dg -> set_col_edit_dimension("status", 40);

// comments, a text data type, is rendered as textarea with cols set to 50, rows set to 10
$dg -> set_col_edit_dimension("comments", 50, 10);

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

set_col_date()

Sat, 14 Jul 2012 06:03:45 +0000

Parameters:
- $col_name: column name
- $srcformat: source date format, eg. “Y-m-d”
- $newformat: new date form to be displayed, eg. “m/d/Y”
- $datepicker_format: datepicker format, eg. “m/d/yy”
Description:
- Helper function to format date using PHP date format options (http://php.net/manual/en/function.date.php). MySql always stores date in either ‘YYYY-MM-DD’ or ‘YY-MM-DD’ format. However, we can still change the front-end date display format while conform to its date standards.
Remark:

In most cases, you don’t need to call this method because phpGrid automatically formats the data with corresponding data type including date.
Only use this method in order to display date format that is different from default date format.
To display time only, please use set_col_property instead.

Example:

Format date to “m/d/Y”, the Spanish date format. The example illustrates two different methods. You can use either or.

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

// srcFormat: MySql date format is "Y-m-d"
// newFormat: Display date format is "m/d/Y"
// datepicker: Datepicker date format is "yy-mm-dd"

// Method 1: change date display and datepicker display (used for edit) to Spanish date
$dg -> set_col_date("orderDate", "Y-m-d", "m/d/Y", "m/d/yy");

// Method 2: change date display and datepicker display (used for edit) to Spanish date
$dg -> set_col_property("requiredDate",
array("formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d","newformat"=>"m/d/Y"),
"editoptions"=>array(
"dataInit"=>"function(el) {
$(el).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'm/d/yy'
})
}")));

// Display time only. No date. It cannot be edited, so we also made it hidden on the edit form.
$dg -> set_col_property("shippedDate",
array("formatter"=>"date",
"formatoptions"=>array("srcformat"=>"ISO8601Short","newformat"=>"g:i A"),
'editable'=>false,'hidedlg'=>true));

// Display datetimepicker. Used when data is DATETIME type.
$dg -> set_col_datetime("myDateTime");

Change calendar datepicker locale

Using method 2, add the following in datepicker in dataInit in editoptions, replace ‘es’ (Spanish) with locale of your choice.

1	$(el).datepicker( $.datepicker.regional[ 'es' ] )

With above included, the entire snippet would be

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

$dg -> set_col_property("requiredDate",
array("formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d","newformat"=>"m/d/Y"),
"editoptions"=>array(
"dataInit"=>"function(el) {
$(el).datepicker( $.datepicker.regional[ 'es' ] );
$(el).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'm/d/yy'
})
}")));

Finally include script link to jQueryUI.

1	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>

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

set_col_fileupload() *

Fri, 13 Jul 2012 15:27:38 +0000

* Please note this feature is currently only available for commercial licenses.

Parameters:
- $col_name: column name that stores file name
- ~~$base_url~~: ~~base URL to the files~~
- ~~$physical_path~~: ~~specify the physical path to the folder where the files are uploaded. When PHP is installed as Apache module, this parameter is optional.~~
Description:
- The file upload is seamlessly integrated with the edit form using Ajax, no page refresh ever occurred. Files can be uploaded and deleted right within the form.
Remark:
- A single file upload per datagrid is allowed.
- FORM edit mode only
- File system only with valid upload_tmp_dir value in php.ini
- Filename column should allow NULL value
- ~~$physical_path is automatically obtained if PHP running in Apache module, or MUST be provided as a fallback~~
- When receiving alert message “unexpected token <“, it is your upload folder that doesn’t allow write permission. Please set the folder permission to be writable.
- By default, only JPEG files are allowed for file upload, but one can change the upload file extension to include additional file formats in conf.php called ‘UPLOADEXT‘
The 2nd and 3rd parameters are now dropped. Instead the user must set the upload directory value ‘UPLOADDIR’ in conf.php
X
Example:

1
2
3

// conf.php
define('UPLOADEXT', 'gif,png,jpg,jpeg');
define('UPLOADDIR', '/var/www/web/myuploads/');

1 2	// sample_file_upload.php $dg -> set_col_fileupload("employee_photo");

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

5.0 Archives | phpGrid - PHP Datagrid

Hyperlink to Call JavaScript Function

add_event()

jqGrid events

Grouping event

Form editing events

Form view events

Form deleting events

Searching form

Inline editing events

Cell editing events