如何使用Angular在AgGrid中获得多选下拉列表

Question

我们有AgGrid，并且其中一个列需要一个multiselect下拉列表，并且我们使用的是Angular 7。

我能够找到多选下拉列表，但不能找到agGrid单元格。

请帮助。

我能够生成agGrid，尝试使用下面的链接但无法获取。

https://www.c-sharpcorner.com/blogs/how-to-add-combobox-in-aggrid-or-edit-grid-coloumn-with-combobox

预期：agGrid单元格中的多选下拉列表

Answer 1

我已经在Ag-grid上工作了几个月了，我可以告诉你将定制的东西放到Aggrid细胞上非常困难。

首先，您可以使用属于相关Ag-grid表的GridOptions的frameworkComponents参数。

用法说明： 您有一个独立的组件，可让您在下拉元素中选择多个项目。让我们将此组件命名为 MultiSelectComponent

首先，从任何类型的Ag-grid模块导入GridOptons。我正在使用Enterprise。

import { GridOptions, ... } from '@ag-grid-enterprise/all-modules';
import { MultiSelectComponent} from './multi-select-component';

在Component类中，声明详细信息。

export class Component implements OnInit {
...
columnDefs: any;
...
gridOptions: GridOptions;
this.gridOptions = {
 frameworkComponents: {
  cellCustomComponent: MultiSelectComponent
 }
}

在这里，我们定义了列及其所需的选项。第一列定义包含我们的自定义组件。根据我的自定义组件可以通过两种方式在Ag-grid上显示：

1）它可以显示为网格就绪。。它与cellRenderer一起使用。

2）可以在点击单元格进行编辑后立即显示。为此，您必须声明该列可可编辑为真。它还与cellEditor和cellEditorParams一起使用。

现在我们正在使用第一个选项。我的意思是，cellRenderer个。我也建议您采用同样的方式。

this.columnDefs = [
  {
    headerName: 'Names', field: 'names',
    cellRenderer: 'cellDatePicker', pinned: 'left',
  },
  // other columns definitions here
]

现在几乎可以在上面刚刚定义的“名称”列下的单元格中显示我们自己的自定义组件了。如果我们的自定义组件是日期选择器，那么它将显示为该日期选择器。如果它是表情符号选择器，那么它就是这样。 （例如，click the link用于cellEditor和cellRenderer）

我自己的自定义组件，日期选择器：

Click resource on Aggrid site