CODEWITHSUNDEEP
treeviewangular-ui-grid
RalleSaid
RalleSaid

Reputation: 381

Angular UI-Grid tree level with different templates

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>

Upvotes: 2

Views: 4807

Answers (2)

Sanju Dongol
Sanju Dongol

Reputation: 11

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;
    }
  }
]
};

Upvotes: 1

RalleSaid
RalleSaid

Reputation: 381

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;
}

Upvotes: 3

Related Questions