Add a class to ng-grid row

javascript angularjs ng-grid

11,362

Solution 1

You have to use a row template. In this template you can use ng-class and dynamically assign a CSS class by databinding.

A simple example:

HTML

<body ng-controller="MyCtrl">
    <div class="grid" ng-grid="gridOptions"></div>
</body>

JavaScript

var app = angular.module('myApp', ['ngGrid']);

app.controller('MyCtrl', function($scope) {
  $scope.fileOneUploaded = true;
  $scope.fileTwoUploaded = false;

  $scope.gridData = [{fileName: 'File 1', size: 1000, isUploaded: $scope.fileOneUploaded },
                {fileName: 'File 2', size: 2000, isUploaded: $scope.fileTwoUploaded }];
  $scope.gridOptions = { 
    data: 'gridData',
    rowTemplate: '<div style="height: 100%" ng-class="{red: !row.getProperty(\'isUploaded\')}">' + 
                    '<div ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
                      '<div ng-cell></div>' +
                    '</div>' +
                 '</div>'

  }
});

CSS

.grid {
  width: 300px; 
  height: 100px;
  border: solid 1px rgb(90,90,90);
}

.red {
  background-color: red;
  color: white;
}

Solution 2

I'm dumb. There's a standard configuration option for this, namely, rowTemplate.

Thanks to @charlieftl for making me re-read the docs :)

11,362

Author by

robert.bo.roth

Currently working on some upcoming projects with a small team in Austin, TX. Primarily using AngularJS and Symfony2 to develop new mobile and web-based healthcare applications. Always looking for inspiration of something fun to build on my own, but haven't been able to do much recently.

Updated on June 07, 2022

Comments

robert.bo.roth almost 2 years

I'm using ng-grid to display a collection of files that are being uploaded (each file has its own row).

If one/any of the files fails to upload, I'd like to modify that row and put a class on it to show that it failed to upload.

How would I go about adding a class to an entire row?
robert.bo.roth over 10 years

Thanks for writing up the answer. Today I learned that I can't read. Was reading through the docs trying to find the rowTemplate and just kept missing it :) Thanks again.
Sankha Kulathantille almost 5 years

But what if you just want to add a custom class depending on a property value, not rewrite the HTML for the whole goddamned row?