Custom Event Handler

phpGrid supports custom event handlers using the add_event() method. The event handlers are essentially JavaScript functions or they can be enclosed with PHP heredoc.

Events used in examples

  • jqGridSelectRow
  • jqGridrowattr
  • jqGridAddEditBeforeSubmit
  • jqGridAddEditAfterSubmit
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("/path/to/conf.php");

$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");

$dg->add_event("jqGridSelectRow", 'onSelectRow');
$dg->add_event("jqGridrowattr", 'onRowAttr');
$dg->add_event("jqGridAddEditBeforeSubmit", 'beforeSubmit');
$dg->add_event("jqGridAddEditAfterSubmit", 'afterSubmit');
$dg->enable_edit('FORM');

$dg -> display();

In this particular demo, using “jqGridAddEditAfterSubmit” event handler, you will also be able to obtain the auto-generated ID value during insert/add from the “status” parameter in the Javascript callback function.

Here’s the JSON value returned from “status” where its “responseText” contains the newly auto-generated ID value.

1
2
3
4
5
6
7
8
{
  readytate:4,
  responseText:{
    id:8
  },
  status:200,
  statusText:OK
}

custom_event_addeditaftersubmit-console

Event Handlers in 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script>
function onSelectRow(status, rowid)
{
    alert('event 1');
    console.log(rowid);
    console.log(status);

// ******* Example to redirect a new URL when select a row  *******
// orderNumber = $('#orders').jqGrid('getCell',rowid,'orderNumber');
// customerNumber = $('#orders').jqGrid('getCell',rowid,'customerNumber');
// window.location = encodeURI("http://example.com/" + "?" + "orderNumber=" + orderNumber + "&amp;customerNumber="+customerNumber);
}

function onSelectRow2(status, rowid)
{
  alert('event 2');
  console.log("here");
}

function onRowAttr(rowData, inputRowData)
{
    return rowData.status === "OnHold" ? {style: "background-color:blue"} : {};
}

// post data another page after submit
function beforeSubmit(event, postData)
{
    console.log(event);
    console.log(postData);

    alert('beforeSubmit: post customerNumber ' + postData.customerNumber + ' to another page through AJAX call');

    $.ajax({ url: 'test.php',
        data: {custNum: postData.customerNumber}, // replace customerNumber with your own
            type: 'post',
            success: function(output) {
                alert(output);
        }
    });
}

// post data another page after submit
function afterSubmitFunc(event, status, postData)
{
    $.ajax({ url: '/my/site',
        data: {custNum: postData.customerNumber}, // replace customerNumber with your own field name
        type: 'post',
        success: function(output) {
                    alert(output);
                }
        });
}
</script>

See Live Example! (click on any row to trigger event)

 

Also see Cell Select Custom Event Examples and entire custom events examples on KB.

Meet Querro! 📈 Embeddable SQL-based Data Analytics in Your App

X