Search code examples
javascriptstylesag-grid

ag grid edit color of each row depends on its key

i using ag grid, i have tasks to diplay each task has a status (DONE,RELEASED,ACCEPTED ...) and i want to show in grid. each row display a task and i want to appear in such color that i defind in js file


    $scope.status=
    [
    {'status:DONE','color:red'}, ...
    ]

and so on.

the data about task i read it from db so in gridOptions the rowdata is null

```
$scope.gridOptions = {
            columnDefs: columnDefs,
            rowData: null,
            angularCompileRows: true,
            floatingFilter: true,
            rowSelection: 'single',
            animateRows: true
};
```

in other function i get data from database and i write

`$scope$scope.gridOptions.api.setRowData($scope.tasksList);`

my question how can i set for each status to diplay it in a predefined color after setrowdata ?

Solution

  • You can use ag-grid cell styles. Based on the row status, you can attach different css classes or colors. Refer to this link