Adding Custom Validations on JS Grid of MY Task Web Part in Project Server

In Project Server and SharePoint, we commonly use JS Grid control to display the tabular data in grid view. If you are using Project Server, then you must have seen that JS Grid is used on most of the out of the box available web parts. JS Grid also provides flexibility to carry out customization using its available APIs.

In one of the projects, there was a requirement to validate actual start date of the assignments of logged in user for My Task Web part. This implementation called for a custom solution.

Here’s a solution in which we have to validate if task Actual start date is null i.e. task not yet started, then Task Start Date must be later than or equal to current date.  If the validation rule fails, then we need to highlight those task rows.

The implementation steps for the solution are as follows:

1. 1. Create a SharePoint page and add My Task Web Part on it.

1. 1. To carry out custom validation on the JS Grid, we have to create a JavaScript file to add custom code, upload it on a SharePoint document library and add it on the SharePoint page created above using a content editor web part.

1. Now, let’s take a look at various JS grid methods used.

a. Get the instance of MY Task Grid

Each of the JS Grid Instance available out of the box has its predefined name.  When My Task Web part is added on a page, we get the component name as “MyTasksComponent” and we can use below code to get its instance on the page:

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

b. Get the list of all Records of My Task Grid

To apply validation rule when page loads, we have to retrieve all JS Grid records using below code:

 allRecords = MyTasksComponent.get_GridSatellite().get_tableCache().GetRecords(ranges).records[0]

The rangesvariable contain the start and end value to fetch the records.

 ranges = [{pos: 0,
count:             MyTasksComponent.get_GridSatellite().get_tableCache().GetRecordCount()}];

MyTasksComponent.get_GridSatellite().get_tableCache().GetRecordCount() gives the count of total records in the grid.

c. Set the indicator for error on JS Grid row

_grid.SetRowError(allRecords[index].recordKey, “Custom Validation Message”);

After loading sp.js file on page, the custom JavaScript code runs which parse all MY Task JS grid and check Task Start date and Actual Start date value and highlight all the rows which fails the validation rule.

Let’s say the current date is 31 Jan 2016, then you can see that there are two tasks which are not yet started i.e. Actual start date is null and Task Start date has passed out as highlighted.

When you click on the indicator then the custom messages will be visible.

The complete JavaScript code is here.

ExecuteOrDelayUntilScriptLoaded(TaskGridLoad, “sp.js”);

function TaskGridLoad() {
    try { 
        if (typeof(MyTasksComponent) === “undefined”) {
            return;
        }

        if (window.PJ == null || MyTasksComponent == null) {
        return;
        } else { 
            _grid = MyTasksComponent.get_GridSatellite().GetJsGridControlInstance();
            var ranges = [{
            pos: 0,
            count: MyTasksComponent.get_GridSatellite().get_tableCache().GetRecordCount()
            }];

            var allRecords = MyTasksComponent.get_GridSatellite().get_tableCache().GetRecords(ranges).records[0];
            var today = new Date();
            var currentDate = new Date(today.getMonth() + 1 + “/” + today.getDate() + “/” + today.getFullYear());

            //Iterate through all records to check for the validation rule

            for (var index = 0; index < allRecords.length; index++) {

                var AssgnStartDate = allRecords[index].properties[“ASSN_START_DATE”].localizedValue

                var AssgnActualStartDate = allRecords[index].properties[“ASSN_ACT_START”].localizedValue

                                var assnStartDate = null;

                if (AssgnActualStartDate == null || AssgnActualStartDate == undefined) {

                    if (AssgnStartDate != null || AssgnStartDate != undefined) {

                        assnStartDate = new Date(AssgnStartDate);

                    }

                    if (assnStartDate < currentDate) {

                        _grid.SetRowError(allRecords[index].recordKey, “Start Date should be later or equal to current date”);

                    } 
                }
            }
        }
    } catch (err) {
        alert (err.Message);
    }
}

 Conclusion:

As we have seen how to validate task rows with custom validation rules, similarly we can carry out any of our custom validations like validating actual and planned hours, or any enterprise task level custom fields value, on various events of JS grid.