ng-click not working from ui-grid checkbox cellTemplate

Question

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

What does the HTML look like that is using this? Are you using ng-bind-html like in that first Plunkr? — brettvd
– 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
– 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
– Saurabh, Commented Apr 12, 2015 at 6:31

PaulL · Accepted Answer · 2015-04-12 06:23:32Z

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.

answered Apr 12, 2015 at 6:23

PaulL

6,6503 gold badges37 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saurabh Over a year ago

Thanks PaulL I somehow missed your response here but was checking your response on the Issue github.com/angular-ui/ng-grid/issues/1674 and was able to resolve the issue. Thanks again :)

Collectives™ on Stack Overflow

ng-click not working from ui-grid checkbox cellTemplate

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related