ag-grid呈现具有背景色的行

Question

I am currently working with Angular and ag-grid to display a table that contains various data, a column within this data will contain the value "Fail" or "Pass".

I am currently looking into the ability to render the background of a row as red when a fail is detected.

The problem i am having is that i cannot find any examples of this code.

I have inferred that there are a number of things i can do, specifically use multiple callbacks in the api to perform functions like this. But as a newbie to the field of web development (at least the front end) i am finding the exact stuff elusive in how to use these call backs.

ok so, I have the following known methods:

1)

gridOptions.getRowStyle(params) {
    if (params.data.myColumnToCheck === myValueToCheck) {
        return {'background-color': 'yellow'}
    }
    return null;
}

2) processRowPostCreate callback - no known code

3) This is currently what i have in place and was from my head - but it is ugly code and whilst working i am sure its more expensive and poor than the actual suggestions i have seen.

vm.toggleColour = function () {
    vm.state.colour = !vm.state.colour;
    if (vm.state.colour) {
        columnDefs = [
            { headerName: "S", field: "1", width: 210, sort: "asc", cellStyle: changeRowColor },
            { headerName: "TS", field: "2", width: 170, cellStyle: changeRowColor },
            { headerName: "TC", field: "3", width: 195, sort: "asc", cellStyle: changeRowColor },
            { headerName: "H", field: "4", width: 60, cellStyle: changeRowColor },
            { headerName: "TV", field: "5", width: 85, cellStyle: changeRowColor },
            { headerName: "Verdict", field: "6", width: 60, cellStyle: changeRowColor },
            { headerName: "Message", field: "Message", width: 85, cellStyle: changeRowColor },
            { headerName: "Timestamp", field: "Timestamp", width: 175, cellStyle: changeRowColor },
            { headerName: "Audit Num", field: "AuditNum", width: 95, cellStyle: changeRowColor },
            { headerName: "Fail Reasons", field: "Reasons", width: 1430, cellStyle: changeRowColor }
        ];
    }
    else {
        columnDefs = [
            { headerName: "S", field: "1", width: 210, sort: "asc" },
            { headerName: "TS", field: "2", width: 170 },
            { headerName: "TC", field: "3", width: 195, sort: "asc" },
            { headerName: "H", field: "4", width: 60 },
            { headerName: "TV", field: "5", width: 85 },
            { headerName: "Verdict", field: "6", width: 60 },
            { headerName: "Message", field: "Message", width: 85 },
            { headerName: "Timestamp", field: "Timestamp", width: 175 },
            { headerName: "Audit Num", field: "AuditNum", width: 95 },
            { headerName: "Fail Reasons", field: "Reasons", width: 1430 }
        ];
    }
    resizeColumns();
    vm.gridOptions.api.setColumnDefs(columnDefs);
};
function changeRowColor(params) {
    if (params.node.data.FinalVerdict === 'Fail') {
        return { 'background-color': '#red' };
    }
}

Does anyone have any ideas on how to do what i am wanting without there being a really horrible bit of code like i currently have?

I should say that i would prefer to be able to inject a class to the row and let css style it if possible - any ideas on how to do this? Redrawing the grid is such a pain!

Thanks Guys

Answer 1

Try the following.

To hook up the getRowStyle callback to the function changeRowColor
add the following the line to your gridOptions object.

getRowStyle:changeRowColor

Then define the changeRowColor function as you require
eg

gridOptions={
  columnDefs: blah,
  rowData: blah,
  ...
  getRowStyle:changeRowColor
}

function changeRowColor(params) {
    if (params.data.FinalVerdict === 'Fail') {
        return { 'background-color': '#red' };
    }
}

Cheers