Angular ui-grid events in cell header not firing

Question

I'm using a headerCellTemplate in the columDefs of my ui-grid (not ng-grid but the new rewrite). In the html I have a checkbox. Essentially I am trying to add a checkbox in the header of a column that is all checkboxes so I can check all/none. The cell renders fine with the checkbox. The problem is that the ng-change in the checkbox in the header never fires the event. Additionally the ng-model value never changes. Looking at the code there is a directive used called uiGridHeaderCell so I have to assume that it is gobbling up my event as well as being in its own scope so it never sets the variable in my scope.

Any way around this? Every example I've come across never has anyone trying to call their own method from within the header (ie calling something outside the scope of the directive).

Maryellen

Can you please put jsfiddle or something like that ? – Khania

Answer 1

In ui-grid there is a feature called externalScopes which may be useful to you. Tutorial is here

This is the new headerCellTemplate:

<div ng-class="{ 'sortable': sortable }">
  <div class="ui-grid-vertical-bar">&nbsp;</div>
  <div class="ui-grid-cell-contents" col-index="renderIndex">
    <input type="checkbox" ng-click="$event.stopPropagation();getExternalScopes().showMe()">{{ col.displayName CUSTOM_FILTERS }}
    <span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }">
&nbsp;
</span>
  </div>
  <div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)">
    <i class="ui-grid-icon-angle-down">&nbsp;</i>
  </div>
  <div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">
    <input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || ''}}" />
    <div class="ui-grid-filter-button" ng-click="colFilter.term = null">
      <i class="ui-grid-icon-cancel right" ng-show="!!colFilter.term">&nbsp;</i> 
      <!-- use !! because angular interprets 'f' as false -->
    </div>
  </div>
</div>

(Note the input type checkbox on line 4)

Also I added $event.stopPropagation() to stop the event from reaching the underlying div.

In the HTML you have to write:

<div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div>

Look at this Plunker for more details

Grafton

Wow. So it turned out it all had to do with the RC candidate I was using. I tried a bunch of different ones including those labelled 'stable' and the ONLY one that worked was the one you reference in the PLNKR which is the 'unstable' label. That was a PITA going through them. Thanks. – Maryellen

It doesn't seem like externalscopes is supported anymore, what's the new way of doing it? – Sampan

Answer 2

External-Scopes is no longer used as of ~3.0.7 Accessing Scope in templates

Now you add grid.appScope like this in your cellTemplate:

ng-click="grid.appScope.myFunction()"

Cristalcristate

This should be set to be the answer. The current answer is no longer supported. – Kitsch

Answer 3

When using Angular's controllerAs syntax...

ng-click="grid.appScope.vm.editRow(grid, row)"

example: http://plnkr.co/edit/D48xcomnXdClccMnl5Jj?p=preview

Paquito

Answer 4

I have tried following solution & it worked for me.

ng-click="grid.appScope.$parent.myFunction()"

$scope.function = myfunction(){ }

Enlightenment