angularjsangular-ui-gridui-grid

Get the text box value from the UI-Grid onblur


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

Solution

  • 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
    }