CODEWITHSUNDEEP
angularag-grid-angular
Kash If
Kash If

Reputation: 133

How to color specific rows in ag-grid?

I have a ag grid and I want to color some row numbers only. For example, after processing I find out that I have to color row # 1, 4 & 5 ONLY.

I tried getRowStyle function of ag-grid but in vain

gridOptions.getRowStyle = function(params) {
    if (params.node.rowIndex % 2 === 0) {
    return { background: 'red' }
    }
}

Upvotes: 3

Views: 6257

Answers (2)

Pranay Rana
Pranay Rana

Reputation: 176896

can you try this , as you want to highlight rows based on your processing of rows, so should put some rules as below and highlight rows

gridOptions.rowClassRules: {
  // apply green to 2008
  'rag-green-outer': function(params) { return params.data.year === 2008},

  // apply amber 2004
  'rag-amber-outer': function(params) { return params.data.year === 2004},

  // apply red to 2000
  'rag-red-outer': function(params) { return params.data.year === 2000}
}

by this way you can color your row based on your criteria. This taken from ag gird webporal only.

Upvotes: 0

John
John

Reputation: 11399

Here are some code directly from the documentation

If you need to color only some rows. You need to know which rows to color. I am assuming that you have a state for this. Maybe a variable called indices?

indices: Array<number> = [1,4,5]; // color these rows

gridOptions.getRowStyle = (params) => { // should use params, not indices in the first braces. Binds the component to this. Can use indices in the function now
    if (this.indices.includes(params.node.rowIndex)) {
        return { background: 'red' }
    }
}

You need to be more specific if you need more help. I don't know what is not working.

Here is a Plunkr with an example. I am not sure how you have set everything up in your project, but you can probably get some ideas on how to modify your code to fit with the example I adjusted from the ag-grid docs. I hope the example help

Upvotes: 2

Related Questions