问题
I have built this simple grid:
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 :)
回答1:
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.
来源:https://stackoverflow.com/questions/56074232/can-you-specify-a-different-customcellrenderer-to-different-rows-in-ag-grid-angu