您可以为ag-grid Angular中的不同行指定其他customCellRenderer吗 [英] Can you specify a different customCellRenderer to different rows in ag-grid Angular

问题描述

我建立了一个简单的网格：

I have built this simple grid:

用户从以下选项中选择一个ParenColumn中的列表1。

根据他选择的选项，不同的列表将显示在列2中。
例如，如果他选择option3，则列表3将显示在列表2的第二列中。

问题是：由于第二列中的customCellRenderer应用于所有行，因此相同的列表将显示在所有行中，如图所示。

我的问题是：是否可以给每一行它自己的cellRenderer？

这是ChildColumn定义：

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>
            `)
          } 

要查看我用来实现此网格及其功能的全部代码，请在我回答自己的问题的地方查看一下StackOverflow代码：< br>
如何刷新基于ag网格的B列关于另一列A中发生的更改

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

谢谢：）

推荐答案

您可以执行以下操作

      cellRenderer:  this.getCellRenderer

然后定义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.

这篇关于您可以为ag-grid Angular中的不同行指定其他customCellRenderer吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！