Request a Meeting

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

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.

<script type="text/javascript">

/// <reference name="MicrosoftAjax.js"/>

/// <reference path="~/_layouts/inc/pwa/library/Utility.debug.js"/>

/// <reference path="~/_layouts/inc/pwa/library/WebMethodManager.debug.js"/>

/// <reference path="~/_layouts/inc/pwa/library/shell.debug.js"/>

/// <reference path="~/_layouts/inc/pwa/library/TimesheetSatellite.js"/>

/// <reference path="~/_layouts/inc/pwa/library/RemoteTextConv.debug.js"/>

/// <reference path="~/_layouts/inc/pwa/library/ProjectFramework.debug.js"/>

/// <reference path="~/_layouts/inc/pwa/library/GridSatellite.debug.js"/>

/// <reference path="~/_layouts/inc/pwa/library/projectserverscripts.debug.js"/>

/// <reference path="~/_layouts/inc/pwa/library/pagepropertymgr.debug.js"/>

/// <reference path="~/_layouts/SP.core.debug.js"/>

/// <reference path="~/_layouts/JsGrid.debug.js"/>

/// <reference path="~/_layouts/JsGrid.Gantt.debug.js"/>

ExecuteOrDelayUntilScriptLoaded(AttachEvent, "sp.js");

function AttachEvent()

{

    if (typeof (projectDrilldownComponent) === "undefined")

    { return;

    }

    if (window.PJ == null || projectDrilldownComponent == null) {

        return;

    }

   else {

        if (projectDrilldownComponent != null && projectDrilldownComponent != undefined) {

            if (projectDrilldownComponent.get_GridSatellite() == null) {

                return;

            }

            else {

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

                _grid.AttachEvent(

                  SP.JsGrid.EventType.OnRowFocusChanged,

                  function (eventArgs)

                 {

                    TaskChangeEvent(eventArgs);

                 });

            

            }

        }

    }

}

function TaskChangeEvent(eventArgs)

{

   if (projectDrilldownComponent == null || projectDrilldownComponent == undefined)

        return;

 

     var selection = projectDrilldownComponent.get_GridSatellite().GetJsGridControlInstance().GetSelectedRecordKeys(false);

     var selectedTaskGuid = SP.JsGrid.GuidManager.LookupGuidForIndex(selection[0]);

     var record = projectDrilldownComponent.get_GridSatellite().GetFocusedRecord();

     var SelectedTaskName = record.properties.TASK_NAME.dataValue;

     alert("Task Name:" + SelectedTaskName + " Task Guid " + selectedTaskGuid);

}

</script>

Now on this PDP page, when any row is selected from the Project Detail web part, an alert will be displayed for the selected TaskName and TastGuid as shown below: 

attach an event on JSgrid

In the below JavaScript, we are creating a function AttachEvent. We also create a Project Detail webpart object which will be called when sp.js function gets loaded.

Write the following code in AttachEvent function. This function will attach a row on JSgrid in Project Detail Web part and display the selected record. 


function AttachEvent() {

    if (typeof (_spPageContextInfo) === "undefined") {

        return;

    }

    if (typeof (projectDrilldownComponent) === "undefined")

    {

        return;

    }

    if (window.PJ == null || projectDrilldownComponent == null) {

        return;

    }

    else {

        if (projectDrilldownComponent != null && projectDrilldownComponent != undefined) {

            if (projectDrilldownComponent.get_GridSatellite() == null) {

                return;

            }

            else {

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

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

                    TaskChangeEvent(eventArgs)

                });

            }

        }

    }

}

function TaskChangeEvent(eventArgs)

{

   var record = projectDrilldownComponent.get_GridSatellite().GetFocusedRecord();

    SelectedTaskName = record.properties.TASK_NAME.dataValue;

   alert(SelectedTaskName);

}

Do you have any Project Server 2013 or Project Server 2013 customization on mind, you can discuss with us. We can surely propose you a solution mapping with your custom requirements.

  

Liked it?

Give us a chance to transform your business

*

Tick mark your interest area.

Add your comment