angularJS -UI-grid cellTooltip for dynamic columns

Question

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.

            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";
                                    }
                                }
                            });
                    }
                }

Answer 1

All I had to do was move the "Key" value above the if statement.

for (var i = 0; i < sortedKeysArray.length; i++) {
                   var key = 'Tgt-' + sortedKeysArray[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 value = row.entity["Tgt-25"];
                                var value = row.entity[key];
                                if (value != null) {
                                    return value;
                                } else {
                                    return "No Value";
                                }
                            }