CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
surya singh
surya singh

Reputation: 277

Angular ui-grid : Method injected inside header of data grid is being called for each data cell rendering

Method injected inside header of data grid is being called for each data cell rendering and also being called when we do horizontal or vertical scroll . For reproducing this issue i have attached plnkr link here . http://plnkr.co/edit/ZW43LsiLY7GdnX6XEOgG?p=preview , http://plnkr.co/edit/3E8HTz4Z2daGqRh1WHtx?p=preview (<div class="ui-grid-top-panel" style="text-align: center">{{grid.appScope.letter()}}</div> , try sorting , horizontal or vertical scroll ).

For instance : Below is header cell view template, we have injected {{ grid.appScope.getHeaderLetter( col.name, $parent.$index )}} and when we do horizontal or vertical scroll or at the time of initial cell rendering getHeaderLetter method is being called for each data cell. In another words if we have 100000 cells then method is being called 100000 times. I think I am missing some important fact in terms of use cases . I would highly appreciate your comment on this.

----Header Definition----

<div class="ui-grid-top-panel ui-grid-top-panel-single" id="{{'ui-grid-index-' + col.name  }}" style="text-align: center">
  <div class="ui-grid-alphbet ui-grid-alphbet-first">{{ grid.appScope.getHeaderLetter( col.name, $parent.$index ) }}
  </div>
     .
     .
     .
     more code

I have asked the same question here ... https://github.com/angular-ui/ui-grid/issues/4250, but didn't got any reply.

Upvotes: 2

Views: 259

Answers (1)

ilj
ilj

Reputation: 869

this is the way angular dirty-checking works. not much you can do about it. just try not to put long-running operations in such functions.

how about this:

  $scope.letterFn = function () {
    console.log("CHANGE LETTER")
    return i;
  }

  $scope.letter = $scope.letterFn();

http://plnkr.co/edit/yF1sSG2QXeO9cFNAeDYm?p=preview

Upvotes: 2

Related Questions