How to attach an event on JS Grid of Project Server OOB Details web part

I have been working on project server customization and development since more than four years, and have helped clients with specific custom solutions to suit their business requirement. These customizations include site customization, custom web part creation and workflows.

Recently I came across a requirement to attach an event on JS Grid of Project Server out of box Details Web Part on Project Server 2013. Here I share the solution we implemented for this requirement. The JS Grid control helps display and manipulate tabular data in Web Parts for Microsoft Project Server 2010/2013. Project Server Out of box web parts like My Task, Project Center and Details use JSGrid.

1.       Get the JS Grid control instance

Component object of ‘Details’ web part of Project Server is ‘projectDrilldownComponent’. If we add ‘Details’ web part on Project Detail Page (PDP), then projectDrilldownComponent object will be available. Using ‘projectDrilldownCompsonent’, get the JS Grid Control Instance

Code:

 _grid = projectDrilldownComponent.get_GridSatellite().GetJsGridControlInstance();

2.       Attach event on JS Grid

The JS Grid control offers the following client-side events.

Link has details for the list of event on JSGrid. AttachEvent () function of JSGrid can be used to attach event on JS Grid. Argument for this function is the type of event to be attached and the function to be called on this event.

In below sample code, we are attaching the OnRowFocusChanged event on JS Grid and getting the selected record.

_grid.AttachEvent(SP.JsGrid.EventType.OnRowFocusChanged, function (eventArgs) {

TaskChangeEvent(eventArgs)

Below is the complete sample code.

Create a text file with the below code and upload the file on any document library, and create a PDP page.

Add the Details out of box web part from Project Web App category on the page. Also, add the content editor web part and give the reference of text file that we have uploaded in the document library.