2

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).

Saurabh
  • 21
  • 1
  • 5
  • What does the HTML look like that is using this? Are you using `ng-bind-html` like in that first Plunkr? – brettvd Apr 12 '15 at 04: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 Apr 12 '15 at 06:11
  • UI-Grid team has changed the getExternalScope() variable to grid.appScope. http://ui-grid.info/docs/#/tutorial/305_appScope. After using the appScope my code is working like a charm. – Saurabh Apr 12 '15 at 06:31
  • check this: http://stackoverflow.com/questions/26621598/angular-ui-grid-events-in-cell-header-not-firing/33792526#33792526 – Aliti Jun 02 '16 at 22:53

1 Answers1

6

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.

PaulL
  • 6,650
  • 3
  • 35
  • 39
  • Thanks PaulL I somehow missed your response here but was checking your response on the Issue https://github.com/angular-ui/ng-grid/issues/1674 and was able to resolve the issue. Thanks again :) – Saurabh Apr 12 '15 at 06:45