Angular UI-Grid tree level with different templates

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>

@Jeb50 When the levels are opened one by one (in the second grid), the row class is not refreshed, so the level effect is lost — RalleSaid
– RalleSaid, Commented Feb 21, 2017 at 21:11
have you tried ag-grid? I too got frustrated using ui-grid because many options/features not documented, some documented are not detailed enough to get a clue, some even not working in Plunker. I decided to give this ag-grid a shot. — Jeb50
– Jeb50, Commented Feb 22, 2017 at 4:36
@Jeb50 I finally found a solution, I will consider ag-grid, thank you very much anyway — RalleSaid
– RalleSaid, Commented Feb 22, 2017 at 15:35

RalleSaid · Accepted Answer · 2017-02-22 15:34:23Z

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

Sanju Dongol · Accepted Answer · 2017-04-06 03:48:17Z

1

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

answered Apr 6, 2017 at 3:48

Sanju Dongol

112 bronze badges

Collectives™ on Stack Overflow

Angular UI-Grid tree level with different templates

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related