This topic is locked

Programatically Open Inline Edit based on other field value in the grid

6/14/2019 10:52:15 AM
PHPRunner Tips and Tricks
A
acpan author

Background:
The aim is to provide minimun interaction as the user is on the move. So the web app should be touch friendly with minimum steps.
2 purposes:

  1. To insert 2 custom buttons: "Date_Up" and "Date_Down", so user can tap and change the date field by +30 min and -30 min, respectively.
  2. To open inline edit automatically if its "date_from" is more than current date and time.

    i.e basically, allows user to edit data, if date_from has not yet passed.
    Current Challenge:
    The online help "How to control Inline Add/Edit functionality from script" shows how to open inline edit for all records on the grid or specific records based on "internal index id" on the grid. It does not provide a direct way to trigger inline edit conditionally based on other record's value on the grid.
    We need to scan through all records first, "mark" records that meet the condition and pass the marked values as an "proxy array" variable to javascript on load event and loop through the array and trigger inline edit for those records. (I would suggest future phpr version pageObj api for inline edit to include record key as a param in addition to grid's "internal index id").
    Let's get started
    Table Name: eventTable:
    id | date_from | description | "Date_Up" | "Date_Down"
    For each row displayed on the grid, we need to check the date_from value if it is more than current date/time,

    and we need to get the "internal index number" of that row displayed on the grid page.
    If conditions meet, show the date up and down buttons and programmatically open inline edit for the row.


    After inserting the Date_Up and Date_Down buttons to the grid, we will need to create codes in various events for the List Page.
    Step 1: in Before process event:
    We initialise 2 session variables here. id_group_index is the index counter of each and every record on the grid,

    and id_group_array stores only the id_group_index values that meet the date_from condition, to be used in javascript onload event later.


$_SESSION["id_group_index"] = 0;

$_SESSION["id_group_array"] = array();


Step 2 - After record processed event:
Here, we use $_SESSION["id_group_index"] to count each record processed in this event.

Only the values that meet the date_from condition are pushed into array $_SESSION["id_group_array"].


// Start the counter now:

$_SESSION["id_group_index"]++;
// Check date_from if more than current date time:

$firstTime=strtotime($data["date_from"]);

$lastTime=strtotime(NOW());
// perform subtraction to get the difference (in seconds) between times

$diff=$firstTime-$lastTime;
// if date_from more than current date, it's over for this record, hide up down buttons.

// (Although hide the date buttons to change date, user can still manually click edit if they want to. We intentionally keep it this way.)

if ( $diff <= 0 )

{

$pageObject->hideItem("Date_Up", $recordId);

$pageObject->hideItem("Date_Down", $recordId);

}

// else less than current, allow changes - show up down buttons and

// store the index into array to be sent as proxy array to javascript onload later.

else

{

$pageObject->showItem("Date_Up", $recordId);

$pageObject->showItem("Date_Down", $recordId);
// Store the index counter into proxy array $_SESSION["id_group_array"]

array_push($_SESSION["id_group_array"], $_SESSION["id_group_index"]);
// Below is not used. Just to show how we can store the field values into an array.

/*

// $recordId is the index id generated by pageObj, which initially i thought we can use it for this purpose but no.

$current_array = array("index" => $_SESSION["id_group_index"],

"recordid" => $recordId,

id_group" => $data["id"],

"marked" => 1);

*/

}


Step 3 - Before display event:
Set the proxy value to $_SESSION["id_group_array"] so we can pass the array to javascript.

Eg of the array values: [2,3,6], which are the index of the row on grid that we want inline edit to open.



$pageObject->setProxyValue("id_group_array", $_SESSION["id_group_array"] );


Step 4 - Javascript onload event:
Here, open inline edit programmatically for rows with index value in the proxy array:


// Get all record IDs using pageObj API on current grid page.

var recsId = pageObj.inlineEdit.getRecsId();
// Get the proxy array now, which contains the index we want inline edit to open.

var id_group_array = proxy['id_group_array'];
// Print Array if needed

// alert(id_group_array.toString()) ;
// loop through each value in the array and open the inline edit:

// "entry" is the value in the the array.
id_group_array.forEach(function(entry) {

// console.log(entry);

pageObj.inlineEdit.editRecById(recsId[entry]);

});


===========================================
For Date_Up and Date_Down custom buttons:
Date Down button codes:
Step 1 - Server Event:



$record = $button->getCurrentRecord();

$record_id = $record["id"];
if ($record["id"])

{

$date_schedule = $record["date_from"];

DB::Exec("Update eventTabe SET date_from = DATE_ADD(date_from, INTERVAL -30 MINUTE) WHERE id = $record_id");

$result["txt"] = "30 minutes earlier!";
$data = array();

$data["id"] = $record_id;

$rs = DB::Select("eventTable", $data );

while( $record = $rs->fetchAssoc() )

{

$result["date_from"] = date("d/n/Y g:i:s A",strtotime($record["date_from"]) );



}

}


Step 2 - Client After Event:



date_from_new = result["date_from"];

rowData.fields['date_from'].html(date_from_new);


========
Date_Up is similar to Date_Down, just +30 min instead of -30 min.
That's it.