ui-grid: CellTemplate not working with html templates

Using ui-grid v3.0.0-rc.15

CellTemplates do not seem to work property when using a non-string template.

I defined an html-template:

<script type="text/ng-template" id="readParamNameCell.html" >
                <div class="ui-grid-cell-contents" tooltip="{{COL_FIELD}}">{{ COL_FIELD }}</div>
        </script>

This is how I am assigning it to my cellTemplate:

cellTemplate: 'readParamNameCell.html'

Whenever I access my page, I am getting a console error:

Syntax error, unrecognized expression: <div class="ui-grid-cell-contents" tooltip="{{grid.getCellValue(row, col)}}">{{ grid.getCellValue(row, col) }}</div> at Function.Sizzle.error (http://localhost:50140/Scripts/jquery-1.9.1.js:4421:8) at tokenize (http://localhost:50140/Scripts/jquery-1.9.1.js:5076:11) at select (http://localhost:50140/Scripts/jquery-1.9.1.js:5460:11) at Function.Sizzle (http://localhost:50140/Scripts/jquery-1.9.1.js:3998:9) at jQuery.fn.extend.find (http://localhost:50140/Scripts/jquery-1.9.1.js:5576:11) at jQuery.fn.jQuery.init (http://localhost:50140/Scripts/jquery-1.9.1.js:196:38) at jQuery (http://localhost:50140/Scripts/jquery-1.9.1.js:62:10) at compile (http://localhost:50140/Scripts/angular.js:6824:25) at http://localhost:50140/Scripts/angular-ui/ui-grid.js:3763:31 at Array.forEach (native) angular.js:11358(anonymous function) angular.js:11358$get angular.js:8445processQueue angular.js:12922(anonymous function) angular.js:12930$get.Scope.$eval angular.js:14123$get.Scope.$digest angular.js:13939$get.Scope.$apply angular.js:14227bootstrapApply angular.js:1487invoke angular.js:4152doBootstrap angular.js:1485bootstrap angular.js:1505angularInit angular.js:1399(anonymous function) angular.js:25579jQuery.Callbacks.fire jquery-1.9.1.js:1037jQuery.Callbacks.self.fireWith jquery-1.9.1.js:1148jQuery.extend.ready jquery-1.9.1.js:433completed

However if I provide it as a string…it works:

cellTemplate: '<div class="ui-grid-cell-contents" tooltip = "{{COL_FIELD}}" tooltip-append-to-body="true" tooltip-popup-delay="400" >{{ COL_FIELD }}</div>'

About this issue

  • Original URL
  • State: closed
  • Created 10 years ago
  • Comments: 21 (9 by maintainers)

Most upvoted comments

Interesting. Is it possible to make a plunker of it? I’m also interested at the jquery involvement in this - all the tutorials now run without jquery, so perhaps this could be a new incompatibility we’ve introduced with jquery?