I searched a lot around this problem but didn't get any solution which is actually working out to fulfill my needs. Problem: I wanted to select the row entity on clicking of the checkbox having a columnDef as [{name: 'field01', displayName: '', field: 'field01', cellTemplate: "<input type='checkbox' ng-model='row.entity.field01' ng-click='grid.appScope.myhello()' />"}].

I am building this columnDef dynamically based on another JSON [Updating Working Code]

  $scope.columnDef = function(){
    var column = [{name: 'field01', displayName: '', field: 'field01', cellTemplate: "<input type='checkbox' ng-model='row.entity.field01' ng-click='grid.appScope.myhello(\"row.entity.field01\")' />"}], coltype = [];
    angular.forEach($scope.columns, function(value, index){
      coltype = [];
      switch(value.type){
        case "Number":  coltype.push({type: "number"});
                        break;
        case "String":  break;
        case "Boolean": coltype.push({editableCellTemplate: "ui-grid/dropdownEditor", cellFilter: "mapBool", editDropdownValueLabel: "bool", editDropdownOptionsArray: [{ id: 1, bool: 'Yes' },{ id: 2, bool: 'No' }] });
                        break;
        case "Date":    coltype.push({type: 'date', cellFilter: 'date:"MM/dd/yyyy"'});
                        break;                  
      }
      column.push(angular.extend({name: value.name, displayName: value.name, enableCellEdit: (value.edit.indexOf("No") != -1) ? false : true}, coltype[0]));
    });

    return column;
  };

  $scope.gridOptions.data = $scope.datagrid;
  $scope.gridOptions.columnDefs = $scope.columnDef();

  $scope.myhello = function(value){
    console.log("It works!!! :-) " + value);
  };

The above code updates the datagrid JSON of the field01 but it don't call the ng-click function. I referenced two Plunkr one with external-scope in ui-grid Plunkr and another one with defining a method in gridoptions and call it locally Plunkr (In this plunker the ng-click is getting called but when I tried checking the value inside the editUser function it was not working as expected).

I searched a lot around this problem but didn't get any solution which is actually working out to fulfill my needs. Problem: I wanted to select the row entity on clicking of the checkbox having a columnDef as [{name: 'field01', displayName: '', field: 'field01', cellTemplate: "<input type='checkbox' ng-model='row.entity.field01' ng-click='grid.appScope.myhello()' />"}].

I am building this columnDef dynamically based on another JSON [Updating Working Code]

  $scope.columnDef = function(){
    var column = [{name: 'field01', displayName: '', field: 'field01', cellTemplate: "<input type='checkbox' ng-model='row.entity.field01' ng-click='grid.appScope.myhello(\"row.entity.field01\")' />"}], coltype = [];
    angular.forEach($scope.columns, function(value, index){
      coltype = [];
      switch(value.type){
        case "Number":  coltype.push({type: "number"});
                        break;
        case "String":  break;
        case "Boolean": coltype.push({editableCellTemplate: "ui-grid/dropdownEditor", cellFilter: "mapBool", editDropdownValueLabel: "bool", editDropdownOptionsArray: [{ id: 1, bool: 'Yes' },{ id: 2, bool: 'No' }] });
                        break;
        case "Date":    coltype.push({type: 'date', cellFilter: 'date:"MM/dd/yyyy"'});
                        break;                  
      }
      column.push(angular.extend({name: value.name, displayName: value.name, enableCellEdit: (value.edit.indexOf("No") != -1) ? false : true}, coltype[0]));
    });

    return column;
  };

  $scope.gridOptions.data = $scope.datagrid;
  $scope.gridOptions.columnDefs = $scope.columnDef();

  $scope.myhello = function(value){
    console.log("It works!!! :-) " + value);
  };

The above code updates the datagrid JSON of the field01 but it don't call the ng-click function. I referenced two Plunkr one with external-scope in ui-grid Plunkr and another one with defining a method in gridoptions and call it locally Plunkr (In this plunker the ng-click is getting called but when I tried checking the value inside the editUser function it was not working as expected).

• javascript
• angularjs
• angular-ui-grid

• What does the HTML look like that is using this? Are you using ng-bind-html like in that first Plunkr? – brettvd Commented Apr 12, 2015 at 4:45
• hi brettvd, I am not updating anything on HTML page even if you remove the ng-bind-html script tag the code works and update the JSON on the page. My concern is on click of checkbox the ng-click should be triggered so that I can capture the row entity which has been clicked. – Saurabh Commented Apr 12, 2015 at 6:11
• UI-Grid team has changed the getExternalScope() variable to grid.appScope. ui-grid.info/docs/#/tutorial/305_appScope. After using the appScope my code is working like a charm. – Saurabh Commented Apr 12, 2015 at 6:31
• check this: stackoverflow./questions/26621598/… – Aliti Commented Jun 2, 2016 at 22:53

1 Answer 1

You need to use appScope, refer http://ui-grid.info/docs/#/tutorial/305_appScope.

You also need a reasonably recent version of ui-grid, as the appScope function changed around rc16 or rc18.