Can I use cellRendererSelector to give each row its own cellRenderer

Question

I am trying to solve this issue:
Can you specify a different customCellRenderer to different rows in ag-grid Angular

In ag-grid's documentation, I found something that might help; under the section Many Renderers One Column, they have demonstrated something a bit similar to my need (see the plunker project).

In this particular part:

cellRendererSelector: function(params) {
  var moodDetails = {
    component: 'moodCellRenderer'
  };

  var genderDetails = {
    component: 'genderCellRenderer',
    params: {
      values: ['Male', 'Female']
    }
  };

  if (params.data.type === 'gender')
    return genderDetails;
  else if (params.data.type === 'mood')
    return moodDetails;
  else
    return null;
}

Which works this way:

In their example, they render the cell based on a value chosen in another column in the same row.
Intuitively, I tried the following:

if (params.node.id === 1)
    return genderDetails;
else if (params.node.id === 5)
    return moodDetails;
else
    return null;

I thought that was supposed to work, but it didn't:

Any idea why this didn't work?

Answer 1

you almost got it!

the only issue with the code is that node.ids are of type string, while you try to compare them with numbers.

to fix it, update the cellRendererSelector conditions to test for strings:

if (params.node.id === '1')
    return genderDetails;
else if (params.node.id === '5')
    return moodDetails;
else
    return null;

---

note that lenient comparison would also work:

if (params.node.id == 1)
    // and so on...

… as the number will be coerced to a string before the comparison. i'd advise against it though, it can become a pitfall later, when you forget why you've put that == in the first place :)