`,
})
export class AppComponent {
private gridApi!: GridApi;
defaultColDef: ColDef = {
flex: 1,
editable: true,
valueFormatter: valueFormatter,
valueParser: valueParser,
};
columnDefs: ColDef[] = getColumnDefs(config);
rowData: any[] | null = data;
applyExampleConfig(): void {
config.allowTyping = getCheckboxValue("#allow-typing");
config.suppressMultiSelectPillRenderer = getCheckboxValue(
"#suppress-multi-select-pill-renderer",
);
config.useCustomCellRenderer = getCheckboxValue("#custom-cell-renderer");
if (this.gridApi) {
const activeEdit = this.gridApi.getEditingCells()[0];
if (activeEdit) {
this.gridApi.stopEditing();
}
this.gridApi.setGridOption("columnDefs", getColumnDefs(config));
if (activeEdit) {
requestAnimationFrame(() => {
this.gridApi.startEditingCell({
rowIndex: activeEdit.rowIndex,
rowPinned: activeEdit.rowPinned,
colKey: "colors",
});
});
}
}
}
onGridReady(params: GridReadyEvent) {
this.gridApi = params.api;
}
}
const valueFormatter = (params: ValueFormatterParams) => {
const { value } = params;
if (Array.isArray(value)) {
return value.join(", ");
}
return value;
};
const valueParser = (params: ValueParserParams) => {
const { newValue } = params;
if (newValue == null || newValue === "") {
return null;
}
if (Array.isArray(newValue)) {
return newValue;
}
return params.newValue.split(",");
};
const config: MultiSelectExampleConfig = {
allowTyping: false,
suppressMultiSelectPillRenderer: false,
useCustomCellRenderer: false,
};
function getColumnDefs(exampleConfig: MultiSelectExampleConfig): ColDef[] {
const {
allowTyping,
suppressMultiSelectPillRenderer,
useCustomCellRenderer,
} = exampleConfig;
return [
{
headerName: "Colours",
field: "colors",
cellRenderer: useCustomCellRenderer ? ColourCellRenderer : undefined,
cellEditor: "agRichSelectCellEditor",
cellEditorParams: {
values: colors,
cellRenderer: useCustomCellRenderer ? ColourCellRenderer : undefined,
allowTyping,
suppressMultiSelectPillRenderer,
multiSelect: true,
searchType: "matchAny",
filterList: true,
highlightMatch: true,
valueListMaxHeight: 220,
} as IRichCellEditorParams,
},
];
}
function getRandomNumber(min: number, max: number) {
// min and max included
return Math.floor(window.agRandom() * (max - min + 1) + min);
}
const data = Array.from(Array(20).keys()).map(() => {
const numberOfOptions = getRandomNumber(1, 4);
const selectedOptions: string[] = [];
for (let i = 0; i < numberOfOptions; i++) {
const color = colors[getRandomNumber(0, colors.length - 1)];
if (selectedOptions.indexOf(color) === -1) {
selectedOptions.push(color);
}
}
selectedOptions.sort();
return { colors: selectedOptions };
});
function getCheckboxValue(id: string): boolean {
return document.querySelector