shadowhunter_077 shadowhunter_077 - 3 months ago 39
CSS Question

cellClass is not working for angular ui grid

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.

Answer

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