This topic is locked

How to call a Dashboard element to reload on demand

4/8/2016 10:46:33 AM
PHPRunner Tips and Tricks
F
FunkDaddy author

I needed a way to sort a dashboard grid element whenever a user clicked on a custom icon I had added to the dashboard. I also removed the column form the list page which I intended to sort on.
So the question was how could I sort the dashboard grid element given that I had removed the column which I wanted to sort on and therefore could not longer simply click on the column header to sort (using phpr native built in sorting feature)?
The answer it to use the pageObj.reload method available in that dashboard grid element list page.
Step 1:

Bind the pageObj on the list page to a custom window variable



//JS OnLoad event

window.my_dash_grid_element = pageObj;


Step 2:

Bind the on click event to a dom element you created



//Sort ascending when this button is clicked.

//I want to sort on my CreatedOn database column (even though it's not shown on the list page)

$('#sort_ascending_button').click(function(){

reloadParams = { orderby: 'aCreatedOn', ctrl: 0 };//note the "a" prepended to the column name to inform phpr we want an ascending sort

window.my_dash_grid_element.reload(reloadParams);

});
//Now another button to handle descending sort

$('#sort_descending_button').click(function(){

reloadParams = { orderby: 'dCreatedOn', ctrl: 0 };//note the "d" prepended to the column name to inform phpr we want an descending sort

window.my_dash_grid_element.reload(reloadParams);

});


Step 3:

Done. We now can click on a button in our dashboard to sort a dashelement on demand even if we don't have the column exposed directly on the grid element
Final thoughts:

You can get creative with this by passing custom parameters inside the reloadParams json which gets posted to the grid element. You can hook into the posted vars in the Before SQL query event by using postvalue('your_custom_param_name') to manipulate the output that will be sent back to display your grid.

F
FunkDaddy author 12/8/2016

I wanted to add to this post a very important piece of information in case anyone else runs into the same issue:
Suppose you added a custom phpr button on the list page of a dashboard grid element. When you use the window.my_dash_grid_element.reload(reloadParams); trick to reload that grid element, the custom button you added loses its binding!
When you reload the dashboard grid by calling window.my_dash_grid_element.reload(reloadParams):



//You would add this to say a edit or add page JS OnLoad event in phpr

this.on('afterSave', function() {

reloadParams = { orderby: 'aCreatedOn', ctrl: 0 };//note the "a" prepended to the column name to inform phpr we want an ascending sort

window.my_dash_grid_element.reload(reloadParams);//You could refresh the grid of record you are adding/editing or even another grid element on the dashboard

});


The problem with the above reload is that the JS OnLoad event of that grid element being reloaded DOES NOT fire off again! And for some strange reason it unbinds the custom phpr button (OnBeforeClient, OnServer, OnAfterClient) inserted on that grid page. Therefore, in order for us to rebind we will first grab the bound event that phpr automatically assigns to the custom button when you create it and we will rebind it on the reload.



//On the list page of the grid element with the custom button

//We need to grab the bound click event of our "Delete Household Button" (we added a custom name attribute in html view to that button to allow us to target it because the id had dynamic number appended to name that was not obtainable from pageid object in list page)

window.delete_household_button = $._data( $('[name="delete_household_button"]')[0], 'events' );//This $._data operated in real time like a function call, hence we call it but then must still store the event in separate variable because upon dashboard reload the window.delete_household_button will call this funciton and find nothng (because by then button was unbound by reload)
window.delete_household_button_event = window.delete_household_button.click[0]['handler'];//We store the event which is the function definition so it can't get overwritten and then we use this in our beforeInit function below
//Since JS will not load when we use the window.households_tbl_list.reload(reloadParams); to reload a dash element, we need to bind beforeInit event which will then be able ot listen to those subsequent reload requests

this.on('beforeInit', function() {

//We rebind the "Delete Household" button with the original event that phpr had bound to it because that button gets unbound upon dashboard element reloads called via window.households_tbl_list.reload(reloadParams);

$('[name="delete_household_button"]').bind('click', window.delete_household_button_event);

});


And that is all. You can now rebind the custom button with its original event. Additionally you can also add new JS behaviors after the reload is complete by including it inside the beforeInit event.
Note the beforeInit event will not fire the first time that grid page loads because by the time its bounds that event already took place, hence it will only trigger on subsequent loads such as those done via our reload request in dashboard :-)
Cheers,
Marcelo

F
FunkDaddy author 2/7/2019

Update for PHPR 10
I had to refresh a child list page that was displayed in another master list page after add/ edit via popup form that was coming from the child.
Simply had to:

  1. Add to child list page On JS event the following : window.listPage_my_child_table = pageObj;
  2. In the Add / Edit page I simply added this:



this.on('afterSave', function() {

//we check page to see if list is being displayed as a child so we dont run this on main list page when viewing child list not as a child

if( window.listPage_my_child_table .pageMode == 'listdetails' ){

reloadParams = { orderby: 'aCreatedOn', ctrl: 0 };//note the "a" prepended to the column name to inform phpr we want an ascending sort

window.listPage_my_child_table .reload(reloadParams);

}

});


Done