Angularjs -UI-grid celltooltip for dynamic columns

See more:

Javascript

AngularJs

I have a stored procedure that returns dynamic columns and I was able to paint the output with some help on angularJS ui-grid. Now I am trying to add "CellToolTip". Screenshot below is the output of the stored procedure in which columns 25 to 22 are dynamic (which means they can range from 150 to 0 depending on the input given to the stored procedure). The columns that start with "Tgt"are Targets which I don't want to display but show the target value when hovered over the column. I was able to successfully hide the "Tgt-"columns on the webpage with out issue.

Now I need to show them as a CellToolTip when I hover over the dynamic columns 25 to 22 with which I need help. In the screenshot example below when I hover over the cell with value 0.901 that is against column 25 and row "Vat Fill Calc F/P Ratio" attributename I would like to see "0.89". But if I hover over the cell value 0.89 that is against column 25 and row "Vat Batch data F/P" attributename I would like to see "No value" since Tgt-25 column has a NULL for that attributeName.

In my code below within the push function I added "var key = 'Tgt-' + sortedKeysArray[i]; var value = row.entity[key];". When I put break points I get error saying key is undefined. But if I hardcode the key value like "var value = row.entity["Tgt-25"];" then it works fine. I need help with making the hover values dynamic in which I would like to get the target values from their respective target columns. Thanks in advance for the help.

https://i.stack.imgur.com/93J3C.jpg

What I have tried:

LRWService.getVatMakeRpt('1', '1221209', '100000028', '2020-05-08', '2020-05-08').success(function (data) {
if (data === null || data.VatMakeRptList === null || data.VatMakeRptList.length === 0) {

    $scope.error = true;
    $scope.errorDescription = "No data found for selected criteria.";
} else {
    $scope.gridOptionsVatMakeRpt.paginationPageSizes.push(
        data.VatMakeRptList.length
    );
    var VatMakeRptList = data.VatMakeRptList;
    var keysArray = [];

    keysArray = Object.keys(VatMakeRptList[0]);
    var sortedKeysArray = keysArray.sort().reverse();

    $scope.gridOptionsVatMakeRpt.columnDefs.push({ name: 'LineNumber', field: 'LineNumber', width: '20%', visible: true });
    $scope.gridOptionsVatMakeRpt.columnDefs.push({ name: 'AttributeName', field: 'AttributeName', width: '20%', visible: true });


    for (var i = 0; i < sortedKeysArray.length; i++) {
        if (!(sortedKeysArray[i] == "LineNumber" || sortedKeysArray[i] == "AttributeName" || sortedKeysArray[i].includes("Tgt-") == true ))

            $scope.gridOptionsVatMakeRpt.columnDefs.push({
                name: sortedKeysArray[i], field: sortedKeysArray[i], width: '20%', visible: true, cellTooltip: function (row, col) {
                    var key = 'Tgt-' + sortedKeysArray[i];
                    // var value = row.entity["Tgt-25"];
                    var value = row.entity[key];
                    if (value != null) {
                        return value;
                    } else {
                        return "No Value";
                    }
                }
            });
    }
}