Click here to Skip to main content
14,661,076 members
Rate this:
Please Sign up or sign in to vote.
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";
                    }
                }
            });
    }
}
Posted
Updated 2-Sep-20 10:29am
v2

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 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";
                }
            }
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100