cellClass is not working for angular ui grid

Question

Here is my code:

for (var i = 0; i < gridData.length; i++) {
    var currentData = gridData
    $.each(currentData, function(key, value) {
        if (!angular.isFunction(value)) {
            $scope.columnDefs.push({
                name : key,
                cellClass : 'red',
            });
        }
    });
}
$scope.gridOptions = {
    columnDefs : $scope.columnDefs
};
$scope.gridOptions.data = data;

.red{
 background-color: #ff0000;
 color: #ffffff; 
}

<div ng-controller="GridController" id="grid1">
     <div  ui-grid="gridOptions" class="grid"></div>
</div>

When I replace cellClass property from columnDefs array it's absolutely worked fine but when I add cellClass property to columnDefs array my grid doesn't display data. On inspecting ui-grid dom my data is binded with ui-grid cell but doesn't appear on ui.

I don't think `name : key` is correct, you're binding an object to what the grid expects as a string. — KreepN, Aug 29 '16 at 16:29

score 0 · Accepted Answer · answered Aug 30 '16 at 06:10

0

simply overide this two css class in ui.grid.css

   .ui-grid-row:nth-child(odd) .ui-grid-cell {

}
.ui-grid-row:nth-child(even) .ui-grid-cell {

}

Remove background-color css from the above mention css classes in ui-grid.css

answered Aug 30 '16 at 06:10

Tink

132
2
11

Right, but cellClass should work, you should not need to overwrite the ui-grid.css. – Jacob Barnes Jan 11 '22 at 20:08

score -2 · Answer 2 · answered Sep 02 '16 at 20:22

-2

Use cellTemplate instead of cellClass.

Example:

cellTemplate: "<div class='red'>{{COL_FIELD}}</div>"

answered Sep 02 '16 at 20:22

M. Michal

12

cellClass is not working for angular ui grid

2 Answers2