i'm using angular-ui-grid and am trying to show a combination of of a couple cell templates. I need some grid cells to change class/color based on a property of the entity. I need other cells to show a button that can toggle on/off and only appear for certain rows and cells if the row entity is 'ATTRIBUTE'. I have come up with a combination of a cellTemplate and an editableCellTemplate that accomplishes this. Everything seems to be working except when i click out of focus of the cell with an input field, it doesn't lose focus, and i'm getting the error Syntax Error: Token 'undefined' not a primary expression at column null of the expression [row.entity[] starting at [row.entity[].. When i edit the cell, it turns into input mode and i can input data, when i click out, it does not lose focus it stays in edit mode. If i move the scrollbar on the grid it will lose focus
Heres my cell template:
<div ng-if="row.entity.resultType === 'ATTRIBUTE' && row.entity[col.colDef.field] == 'Pass'" ng-class="grid.appScope.getClassFromTemplate(row, col)">
<button class="ui-grid-cell-btn" type="button" ng-click="grid.appScope.togglePass(row, col)" >
<span class="glyphicon glyphicon-ok green"></span>
</button>
</div>
<div ng-if="row.entity.resultType === 'ATTRIBUTE' && row.entity[col.colDef.field] != 'Pass'" ng-class="grid.appScope.getClassFromTemplate(row, col)">
<button class="ui-grid-cell-btn" type="button" ng-click="grid.appScope.togglePass(row, col)" >
<span class="glyphicon glyphicon-remove red"></span>
</button>
</div>
//what should this template look like?... should be just standard template to display ui grid data
<div ng-if="row !== null && row.entity.resultType !== 'ATTRIBUTE'" class='ui-grid-cell-contents'>
{{MODEL_COL_FIELD}}
</div>
and my editable cellTemplate
<div ng-if="row.entity.resultType === 'ATTRIBUTE' && row.entity[col.colDef.field] == 'Pass'" class='ui-grid-cell-contents'>
<button class="ui-grid-cell-btn" type="button" ng-click="grid.appScope.togglePass(row, col)" >
<span class="glyphicon glyphicon-ok green"></span>
</button>
</div>
<div ng-if="row.entity.resultType === 'ATTRIBUTE' && row.entity[col.colDef.field] != 'Pass'" class='ui-grid-cell-contents'>
<button class="ui-grid-cell-btn" type="button" ng-click="grid.appScope.togglePass(row, col)" >
<span class="glyphicon glyphicon-remove red"></span>
</button>
</div>
<div ng-if="row.entity !== null && row.entity.resultType !== 'ATTRIBUTE'" >
<form name="inputForm">
<input style="background-color: white; !important; color: black !important" type='text' ng-class="'colt' + col.uid" ui-grid-editor ng-model='MODEL_COL_FIELD'>
</form>
</div>
I've put in null checks on everything and still getting the error, so confused. Please help!
