Angular Data GridRich Select Cell Editor - Async Values

The Rich Select Cell Editor supports loading values asynchronously, including paged loading and server-side filtering.

Async Values Copy Link

List values can be provided asynchronously to the editor as shown below:

columnDefs: [
    {
        field: 'language',
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: (_params) => fetch('/api/languages').then((res) => res.json()),
        }
    }
]

Paged Async Values Copy Link

For large datasets, valuesPage avoids loading all items at once and instead loads values on demand based on user scroll and interactions. valuesPageInitialStartRow can be used to set the initial position. The valuesPage callback should return a value that conforms to the RichCellEditorValuesPageResult interface.

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            valuesPage: (params) : Promise<RichCellEditorValuesPageResult<string>> {
                return fetch(`/api/languages?
                    startRow=${params.startRow}
                    &endRow=${params.endRow}`)
                .then((res) => res.json());
            },
            valuesPageInitialStartRow: (value) => getRowForSelectedValue(value),
            valuesPageSize: 100,
            valuesPageLoadThreshold: 10
        }
    }
]

Async Filtering Copy Link

For advanced filtering scenarios, combine async values callback, allowTyping, and filterListAsync to enable async filtering.

When filterListAsync is set to true, the cell editor behaves as follows:

• It calls the values callback with the current search term.
• It delays the search request by 300ms (this can be adjusted using searchDebounceDelay) to avoid excessive calls.
• A loading indicator appears while the network request is in progress.
• Once the promise resolves, the dropdown is updated with the filtered results.

This is shown in the example below:

columnDefs: [
    {
        field: 'language',
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            allowTyping: true,
            filterList: true,
            filterListAsync: true,
            values: (params): Promise<string[]> {
                return fetch(`/api/languages?search=${encodeURIComponent(params.search)}`)
                    .then(res => res.json())
                    .then(data => data.items as string[])
            }
    }
]

Paged Async Filtering Copy Link

For very large, server-backed datasets, combine async filtering with valuesPage so filtered results are also loaded incrementally. valuesPageInitialStartRow is only used for the initial unfiltered load; once the user types, filtered paging starts from row 0.

In this mode each request includes:

• search for the current filter text.
• startRow and endRow for range-based pagination.
• cursor (optional) for cursor-based forward pagination APIs (undefined on the first request, then replayed from the previous response).

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            allowTyping: true,
            filterList: true,
            filterListAsync: true,
            valuesPageInitialStartRow: (value) => getRowForSelectedValue(value),
            valuesPage: (params): Promise<RichCellEditorValuesPageResult<string>> {
                    return fetch(
                        `/api/languages
                            ?search=${encodeURIComponent(params.search)}
                            &startRow=${params.startRow}
                            &endRow=${params.endRow}`
                    ).then((res) => res.json());
            },
        }
    }
]

API Copy Link