Add a class to ng-grid row

Asked 29/10, 2013 at 19:43 Answered 29/10, 2013 at 21:38

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?

Ronaronal answered 29/10, 2013 at 19:43 Comment(2)

can set your own templates... then in template set ng-class based onwhatever variable you need to momitor. See docs for link to github wiki regarding templates – Unbiased 29/10, 2013 at 20:36

Ah, thanks mate. I was looking through the docs for like 30 minutes, I'm not sure how i missed the rowTemplate config option. – Ronaronal 29/10, 2013 at 20:42

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

Detroit answered 29/10, 2013 at 21:38 Comment(2)

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. – Ronaronal 31/10, 2013 at 14:21

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? – Hungarian 15/5, 2019 at 11:6

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

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

Ronaronal answered 29/10, 2013 at 20:43 Comment(0)

Recommended topics

Hot tags