Angular UI-Grid tree level with different templates - treeview

Question

I'm new here, I'm working with Angular UI-Grid, and I have a small problem. The grid that I handle has a tree structure, that works perfect. But to make it easier to follow that structure for the user, I want to implement different colors per level.
I have created this Plunker with two examples, the first is how you should see the different colors per level, and the second is how it behaves today. Has anyone done something like this or do you have any idea how to fix it?
app.js:
var app = angular.module('app', ['ui.grid','ui.grid.treeView']);
app.controller('MainCtrl', ['$scope', '$http','uiGridTreeViewConstants', function ($scope, $http, uiGridTreeViewConstants) {
$scope.myData = [
{"ubi_id":321,"ubi_nom":"America","ubi_pad_id":null,"ubi_tip_id":1,"$$treeLevel":0},
{"ubi_id":322,"ubi_nom":"Sudamerica","ubi_pad_id":321,"ubi_tip_id":2,"$$treeLevel":1},
...
];
var rowtpl = '';
rowtpl += '<div ng-class="{\'nivelGrilla-{{row.entity.$$treeLevel}}\': row.entity.$$treeLevel != \'undefined\' }">';
rowtpl += '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"';
rowtpl += 'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell>';
rowtpl += '</div></div>';
$scope.gridOptions = {
data:'myData',
rowTemplate:rowtpl,
};
}]);
css:
.nivelGrilla-0{
background-color: #254158;
color: white;
}
.nivelGrilla-1{
background-color: #3F6F96;
color: white;
}
html:
<div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid"></div>

Answer 1

I found a solution, the div that contains the entire row, makes a call to a function that returns the name of the class according to the row level.
Here's a plnkr with my solution
js:
var rowtpl = '';
rowtpl += '<div class=\"{{grid.appScope.rowLevel(row)}}\">';
rowtpl += '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"';
rowtpl += 'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell>';
rowtpl += '</div>';
rowtpl += '</div>';
$scope.gridOptions2 = {
data:'myData',
rowTemplate:rowtpl,
};
css:
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
color: inherit !important;
}
.ui-grid-row .ui-grid-cell.ui-grid-cell {
background-color: #f0f0ee;
border-bottom: solid 1px #d4d4d4;
}
.rowLevel-0{
background-color: #254158;
color: white;
}
.rowLevel-1{
background-color: #3F6F96;
color: white;
}
.rowLevel-2{
background-color: #5289B6;
}

Answer 2

You can specify a 'cellClass' within your grid's 'columnDefs' and switch the rows according to the tree level. For example:
$scope.gridOptions = {
data:'myData',
columnDefs: [
{ field: 'Id', name: 'Ubi Id'},
{ field: 'Country', name: 'Ubi Nom'},
cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
switch(row.treeLevel)
{
case 0:
return 'red';
case 1:
return 'blue';
case 2:
return 'green';
default:
break;
}
}
]
};