Angularjs ui-grid change row background color

Question

I have this code in plunker that I cant make it to work : plunker

var app = angular.module('app', ['ngAnimate', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {

  $scope.myData = [{sv_name: "Moroni", sv_code: 50,count:0},
                 {sv_name: "Tiancum", sv_code: 43,count:1},
                 {sv_name: "Jacob", sv_code: 27,count:0},
                 {sv_name: "Nephi", sv_code: 29,count:7},
                 {sv_name: "Enos", sv_code: 34,count:0}];

   $scope.getBkgColorTable = function (saveStatus) {
                switch (saveStatus) {
                    case -1:
                        return "";
                        break;
                    case 0:
                        return "#dff0d8";
                        break;
                    default:// anything but 0 and -1, alerts
                        return "#f2dede";
                }
            };

  //ng-class="{\'green\':true, \'red\':row.entity.count==0 }"
  var rowtpl='<div><div style="{\'background-color\': getBkgColorTable(myData[row.rowIndex].count)}" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>';

  $scope.gridOptions = {
    enableSorting: true,
    data:'myData',

    rowTemplate:rowtpl,
    columnDefs: [
      { field: 'sv_name', displayName: 'Nombre',},
      { field: 'sv_code', displayName: 'Placa'},
      { field: 'count'}
    ]
  };


}]);

The idea is to check status field in the grid and change the background color of the grid.

Regards

Carlos

Vladimir Balandin · Accepted Answer · 2015-01-25 11:45:44Z

1

Try change template to this:

 var rowtpl='<div><div style="height: 100%; {\'background-color\': getBkgColorTable(myData[row.rowIndex].count)}" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>';

When div is empty (has no text) its size is zero so it doesn't rendered.

answered Jan 25, 2015 at 11:45

Vladimir Balandin

3,8543 gold badges19 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs ui-grid change row background color

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related