Project Server 2013: customize JSGrid (Project Center, MyTasks, etc...) ?

Question

Hi,
In Project Server 2010, it was possible to customize the JSGrid, thanks to the tutorial included in the SDK "Walkthrough:
Customizing the PWA Ribbon and Accessing the JS Grid". It works really fine, and I used this possibility in many Project Server 2010 implementation for Customer.
I would like to make it on Project Server 2013, but the same code doesn't work. I found some posts
here, where people had the same issue, but no clear answer.  
The Project Server 2013 SDK does not contain the same tuto upgraded for 2013, and I hope that this possibility still exists.
If somebody has a very basic example to show how to execute some custom code on Focus Change event, or clic, or what ever event happening on this JSGrid, it would be very nice to share.
My installation is On Premise, not in On Line.
Thank you for your help !
Sylvain

Answer 1

Hi,
In fact for filtering, you have to use delegate.
The "HandleFilter" function must be created by you. You have to bind this function to the correct delegate. 
For filtering, the main delegates are:
SP.JsGrid.DelegateType.AutoFilter
SP.JsGrid.DelegateType.LaunchFilterDialog
SP.JsGrid.DelegateType.GetAutoFilterEntries
The post
here explains the process for 2010. For Project Server 2013, the difference is that we don't have the same objects.
Here you can find the way to declare the delegate in Project Server 2013, with the SetDelegate method:
var pc; // Contains the Project Center extension object.
var JsGridControlInstance;
var JsGridSatellite;
_spBodyOnLoadFunctionNames.push("ProjectCenterMain");
function ProjectCenterMain() {
pc = new ProjectCenterExtension();
function ProjectCenterExtension() {
if (typeof projectCenterComponent === 'undefined')
return;
JsGridSatellite = projectCenterComponent.get_GridSatellite();
JsGridControlInstance = projectCenterComponent.get_GridSatellite().GetJsGridControlInstance();
JsGridSatellite.get_tableViewParameters().bAutoFilterableColumns = true;
JsGridControlInstance.SetDelegate(SP.JsGrid.DelegateType.AutoFilter, HandleFilter);
JsGridControlInstance.SetDelegate(SP.JsGrid.DelegateType.LaunchFilterDialog, FilterDialog);
JsGridControlInstance.SetDelegate(SP.JsGrid.DelegateType.GetAutoFilterEntries, FilterMenu);
function HandleFilter(newState) {
alert("Filter !");
function FilterDialog(param) {
alert("FilterDialog !");
function FilterMenu(param) {
alert("FilterMenu !");
My advice to search, is to put a break point on the ProjectCenterExtension function, and through debugger, tou can drill down in the main methods and properties. 
Often you will see functions with get_XYZ(), and then be able to make the matching with the Project Server 2010 syntax.
For the filtering implementation, I beleive that you can deal with your article based on 2010: it should work as soon as you will get the equivalent objects in 2013.
Hope it helps !
Sylvain