How to display and Optgroup dropdown in AG Grid cell Editor? - Stack Overflow

admin2025-05-02  1

I am trying to implement a dropdown with grouped option as a cell editor in AG Grid. However I couldn't find any examples or documentations specifically showing how to achieve this in AG Grid

Expected Output: Current Result:

Here is the code :

{
                resizable: false,
                flex: 1,
                sortable: false,
                suppressMovable: true,
                suppressCellSelection: true,
                field: 'fkcoaId',
                headerName: 'CoA Category',
                tooltipField: 'fkcoaId',
                editable: true,
                minWidth: 200,
                cellEditor: 'agSelectCellEditor',
                cellEditorParams: {
                    values: Object.entries(
                        coaCategories.reduce((acc: { [key: string]: string[] }, category) => {
                            const categoryType = category.type
                            if (!acc[categoryType!]) {
                                acc[categoryType!] = []
                            }
                            acc[categoryType!].push(category.category!)
                            return acc
                        }, {})
                    ).flatMap(([group, categories]) => categories.map((category) => `${group} -> ${category}`)),
                },
                valueGetter: (params: any) => {
                    const category = coaCategories.find((c) => c.id === params.data.fkcoaId)
                    return category ? `${category.type} -> ${category.category}` : ''
                },
                valueSetter: (params: any) => {
                    const [group, categoryName] = (params.newValue || '').split(' -> ')
                    const selectedCategory = coaCategories.find((c) => c.type === group && c.category === categoryName)
                    if (selectedCategory) {
                        params.data.fkcoaId = selectedCategory.id
                        return true
                    }
                    return false
                },
            },
转载请注明原文地址:http://anycun.com/QandA/1746123709a92002.html