UI-Grid Percentage CellFilter and Color
Today I got a chance to create a filter for my grid and apply some color which was simple enough to make. Initially I tried to apply both the style and the modification at the same time which cause a ton problems. This solution is less about code and more a remember to me how or why I split the two up.
app.controller('exampleCtr').filter('percentage', function () { return function (value) { return '<span class=" (value "'>' +(value*100).toFixed(0) + "%"; }; });
//Quick snippet to setup data for colors.angular.forEach($scope.GridOptions.data, function(col, key) { col.cellClass = function(grid, row, col, rowRenderIndex, colRenderIndex) { if (col.cellFilter === 'currency' || col.cellFilter === 'percentage') if (grid.getCellValue(row, col) < 0) { return 'text-danger'; } else { return 'text-success'; } }; });Resources
- I didn't use this gist but just wanted to validated my code against it.
- javascript - Angular JS - Number filter - Change colour when negative - Stack Overflow
- 6 Ways to Take Control of Displayed Data in UI Grid