In 6 Ways to Take Control of Displayed Data in UI Grid we looked at some common methods you can use to control how your data looks in UI-Grid. A grid is only as good as the control it gives over the data displayed in it, and the goal of UI-Grid is definitely to give you as much control as possible.
In this post we are going to look at a couple more tricks that will get you closer to the goal of perfect customization
Dynamic Cell Classes
When you specify your grid’s columnDefs you can give each column a
cellClass. This can either be a string, or in the case we’re going to look at: a
function. The function will receive the grid, row, column, and row and column indexes as arguments. You
just return the appropriate class name
Here’s an example:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$scope.gridOptions
= {
enableSorting: true,
columnDefs: [
{ field: 'name' },
{ field: 'gender',
cellClass:
function(grid,
row, col, rowRenderIndex, colRenderIndex) {
if (grid.getCellValue(row
,col).toLowerCase() === 'male')
{
return 'red';
}
}
}
]
};
|
You don’t have to worry about figuring out your binding if you have a complicated one. The
Grid provides a getCellValue() function. If you pass the row and column in it
will return the value for that row+col combination.
Be aware that each grid cell has its background color set with a class definition that looks like this:
.ui-grid-row:nth-child(odd) .ui-grid-cell. If you give your grid a custom class, like
.grid you can just define your custom cell class as
.grid .ui-grid-row .ui-grid-cell which will raise its CSS specificity enough to take
over.
Lastly here’s a plunker that demonstrates what this looks like:
