Angular UI-Grid Conditional Cell Template - angularjs

Question

I have a cell template that displays data from an external ui-select. However I only want the cell template to appear if the row(s) is/are selected. Here is my current code:
$scope.gridOptions.columnDefs = [
{ name: 'resourceChannel',
cellTemplate: '<div ng-if="$(\'.ui-grid-row\').hasClass(\'ui-grid-row-selected\')">{{grid.appScope.channel.selected.channel}}</div>'},
];

Answer 1

You could add something like a Row-Selected-Listener and ng-if - check if the current row is in the selection.
I added a Plunkr that demonstrates a possiblity of show/hide cellTemplate.
First you add an ng-click to the ui-grid rowtemplate, f.e. addRowtoSelection().
$templateCache.put('ui-grid/uiGridViewport',
...
"<div ng-repeat=\"(rowRenderIndex, row) in rowContainer.renderedRows track by $index\"" +
"ng-click=\"grid.appScope.addRowtoSelection(row)\"" +
...
);
Then you add that function to your appScope.
all.gridOptions = {
columnDefs: [
{field: 'firstName', cellTemplate: '<div ng-if="grid.appScope.isRowSelected(row.uid)">something</div>'},
{field: 'lastName'},
{field: 'company'},
{field: 'employed'}
],
...,
appScopeProvider : {
addRowtoSelection : function(row) {
var contains = false;
for (var i = 0, len = all.rowsSelectedIds.length; i < len; i++) {
if(all.rowsSelectedIds[i] === row.uid) {
all.rowsSelectedIds.splice(i, 1);
contains = true;
}
}
if(!contains) {
all.rowsSelectedIds.push(row.uid);
}
},
isRowSelected : function(id) {
for (var i = 0, len = all.rowsSelectedIds.length; i < len; i++) {
if(all.rowsSelectedIds[i] === id) {
return true;
}
}
return false;
},
},
I also added a check for already selected row-IDs so you add/remove on click. In ColumnDefs you can see the reference to the isRowSelected() check, where you pass in the row.uid. That parses the current array and returns true or false.