CODEWITHSUNDEEP
reactjsag-gridag-grid-react
precious
precious

Reputation: 127

Conditional styling on row for dynamic cell value

Conditional row styling on ag grid where I want to do rowstyle on user choice of cell value

gridoptions.getRowStyle = function(params) {
  if (params.node.data === 'cell value typed by user in external/custom component i.e outside grid') {
    return { 'background': value selected by user in cutom componet outside grid };
  }
}

Upvotes: 2

Views: 621

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81813

@sandeep's answer works perfectly. I just want to chime in another way to solve the problem which is to use context. context is just another javascript object which contains any information that you want to share within AgGrid. The data will be accessible in most AgGrid callbacks for example cell renderers, editors's render callback and in your case getRowStyle callback

const sickDays = // data from external component
const color = // data from external component

<AgGridReact
  getRowStyle={(params) => {
    const { styles, data } = params.context;

    if (params.node.data["sickDays"] === data.sickDays) {
      return { backgroundColor: styles.color };
    }
    return null;
  }}
  context={{
    data: { sickDays },
    styles: { color }
  }}
/>

Live Demo

Edit AgGrid Context

Upvotes: 1

sandeep joshi
sandeep joshi

Reputation: 2161

here is a plunkr which should give you idea to solve the problem. since i don't know much about your component hence i used two input boxes with button to set background color to row but you can use complex styles as well.

I am using api.redrawRows() since the operation we are performing needs to work on row.

this is how it is working

Upvotes: 1

Related Questions