Можете ли вы указать другой customCellRenderer для разных строк в ag-grid Angular

Я построил эту простую сетку:
введите описание изображения здесь

Пользователь выбирает вариант из списка 1 в ParenColumn.
В зависимости от того, какой вариант он выбрал, разные списки будут отображаться в столбце 2. Например, если он выбирает вариант 3, то список 3 будет отображаться во втором столбце соответствующего row.
Проблема заключается в следующем: так как customCellRenderer во втором столбце применяется ко всем строкам, то во всех строках будет отображаться тот же список, что и на картинке.
Мой вопрос: возможно ли "дать" каждой строке свой собственный cellRenderer?
Вот определение ChildColumn:

 {
          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, где я ответил на свой вопрос:
Как обновить столбец B в ag-grid на основе изменения это произошло в другом столбце А

Спасибо :)


angular ag-grid ag-grid-angular ag-grid-ng2
person Ahmed Ghrib    schedule 10.05.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете сделать следующее

      cellRenderer:  this.getCellRenderer

Затем определите функцию getCellRenderer

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>"
    }
}

Предоставление средству визуализации ячеек функции делает его динамическим, поскольку он будет вызываться каждый раз при изменении значений сетки.

person Ghanima    schedule 11.05.2019
comment
Как это поможет мне дать каждой строке собственный CellRenderer? - person Ahmed Ghrib; 12.05.2019
comment
Если функция будет выполняться в каждой строке, может быть возвращено другое возвращаемое значение, что приведет к рендерингу другого модуля рендеринга ячеек. - person Ghanima; 12.05.2019