Как отображать динамические значения в редакторе ячеек ag-grid, выберите
Я хочу показать параметры динамического раскрывающегося списка для каждого ряда ag-grid.
Предположим, что для каждой строки отдел может быть разным и на основании этого я планирую отфильтровать список субъектов (доступный вариант для пользователей, чтобы выбрать в раскрывающемся списке)
Вот мой код:
this.gridOptions.columnDefs = {
headerName: 'Department',
field: 'financingCurrency',
editable: false,
suppressSorting: false,
cellClass: 'grid-align'
},
{
headerName: 'Subject',
field: 'subject',
editable: true,
cellEditor: 'select',
filter: 'text',
cellEditorParams: {
values: this.subjects;
},
suppressSorting: false,
cellClass: 'grid-align'
}
}
Я использую бесплатную версию ag-grid с Angular 2.
У кого-нибудь есть идеи по этому поводу?
2 ответа
Если я правильно понимаю, вы хотите иметь возможность иметь различные значения в cellEditor в зависимости от того, какой отдел выбран. Если это правильно, то вам, вероятно, придется сделать что-то более сложное, имея дело с cellEditors. Вот PLNKR, который я сделал, который проверяет, начинается ли имя с J, если это так, то это позволяет третий вариант.
Пожалуйста, обратитесь к plnkr для полного примера, а также к документации, чтобы убедиться, что вы получаете все импортированные / экспортированные в нужных местах. Вот что является ключевым для вас, помимо того, что указано в документации:
agInit(params: any): void {
if (params.node.data.financingCurrency == 'Your Super Department') {
subjects = [...super options...]
} else {
subjects = [...different options...]
}
}
agInit
вызывается каждый раз, когда начинается редактирование. params
имеет сложный объект, (я предлагаю console.log()
это просто для просмотра всего, что вам доступно) но в основном узел ссылается на строку, в которой находится ячейка, а данные - это данные для этой строки, и, судя по вашим colDefs, вы можете получить значение Department от финансирования валюты.
попробуйте что-нибудь подобное:
{
headerName: ' MEDICINE NAME ',
field: 'medicine',
cellEditor: 'autoComplete',
cellEditorParams:params => {
return {
'propertyRendered' : 'name',
'rowData': this.medicineList,
'columnDefs' : [{headerName: 'Medicine', field:'name'}]
}
}
},