Get the text box value from the UI-Grid onblur

Question

I would like to get the value that is entered in the textbox on blur event in UI-Grid. iam unable to get the value the event is getting triggered but unble to get the logic how to get the text box value. can some help in figure it out.

This is the code:

  $scope.gridOptions = {
        headerTemplate: 'header-template.html',
        showColumnFooter: true,
        columnDefs: [{ name: 'H', width: '15%' }, { name: 'H1', width: '30%' }],
        data: [
            { H: "", H1: "Brand name" },
            { H: " ", H1: "Molecule" },
            { H: "Product Details ", H1: "Therapeutic area" },
            { H: " ", H1: "Targeted indication " },
            { H: " ", H1: "Estimated size of the patient population (in your market) " }
        ],
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            gridApi.core.on.renderingComplete(gridDrawn());
        },
    };

 $scope.gridOptions.columnDefs.push({
            name: 'H2', enableCellEdit: false,
            field: "colButton", displayName: "Push Me",
            //aggregationType: uiGridConstants.aggregationTypes.sum,
            aggregationHideLabel: true,
            cellTemplate: '<div><input type="Number" placeholder="Enter Number" onblur="calculateTotal()" style="width:90%" /></div>',
            rowTemplate: '<div>Hai</div>',
            width: '10%',
            footerCellTemplate: '<div class="ui-grid-cell-contents" >Total: {{col.getAggregationValue() | number:2 }}</div>'
        });


function calculateTotal() {
    alert("Hello");
 gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
            $scope.msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue;
            $scope.$apply();
        });
}

score 0 · Accepted Answer · answered May 29 '19 at 10:30

define a variable on scope like:-

$scope.textboxValue = '';

then add the variable to the ng-model of the cell template like below

cellTemplate: '<div><input type="Number" ng-model="textboxValue" placeholder="Enter Number" onblur="calculateTotal()" style="width:90%" /></div>'

your textbox value will be accessible in the function

$scope.calculateTotal = function () {

    console.log($scope.textboxValue);
    //other code
}

Get the text box value from the UI-Grid onblur

1 Answers1