1

I have built this simple grid:
enter image description here

The user chooses an option from List 1 in ParenColumn.
Depending on which option he chose, different lists will be displayed in column 2. For example, if he chooses option3 then list 3 will be displayed in the second column in the corresponding row.
The problem is: Since the customCellRenderer in column two is applied to all the rows then The same list will be shown in All the rows as you see in the picture.
My question is: Is it possible to "give" each row its own cellRenderer?
Here's ChildColumn Definition: 

 {
          headerName: "ChildColumn",
          field: "chdCol",
          cellRenderer:  (params) => {
            return(
                   `       <select class="form-control">
                <br>`
                +`<option>` +
                this.receivedChosenOptionfromCol1[0]
                +`</option>`
                +`<option>` +
                this.receivedChosenOptionfromCol1[1]
                +`</option>` +
                `<option>` +
                this.receivedChosenOptionfromCol1[2]
                +`</option>` +
                `<option>` +
                this.receivedChosenOptionfromCol1[3]
                +`</option>` +
              `</select>
            `)
          }

To see the whole code I used to implement this grid and its functionality, please check-out this StackOverflow code where I answered my own question:
How to refresh a column B in ag-grid based on a change that occured in another column A

Thanks :)

Ahmed Ghrib
  • 695
  • 4
  • 13
  • 29

1 Answers1

0

You can do the following

      cellRenderer:  this.getCellRenderer

Then define the getCellRenderer function

function getCellRenderer(params) {
    // Check condition to render renderer 1 or 2
    // Replace condition
    if (true) {
        return "<h1> Component 1 </h1>"
    } else {
        return "<h1> Component 2 </h1>"
    }
}

Giving the cell renderer a function makes it dynamic as it will be called every time the grid values are changed.

Ghonima
  • 2,978
  • 2
  • 14
  • 23