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.