Angular Data GridRich Select Cell Editor

An alternative to using the browser's select popup for dropdowns inside the grid.

The Rich Select Cell Editor allows users to enter a cell value from a list of provided values by searching or filtering the list.

Enabling Rich Select Cell Editor Copy Link

Edit any cell in the grid below to see the Rich Select Cell Editor.

Enabled with agRichSelectCellEditor and configured with IRichCellEditorParams.

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
        }
        // ...other props
    }
]

Benefits over browser's select are as follows:

• Uses DOM row virtualisation so very large lists can be displayed.
• Integrates with the grid perfectly, avoiding glitches seen with the standard select.
• Uses HTML to render the values: you can provide cell renderers to customise what each value looks like.

Customisation Copy Link

Cell Renderer Copy Link

The cell renderer used within the editor can be customised as shown below:

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: ColourCellRenderer,
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            cellRenderer: ColourCellRenderer,
            valueListMaxHeight: 220
        }
        // ...other props
    }
]

interface ICellEditorRendererAngularComp {
    // Mandatory - Params for rendering
    agInit(params: IRichCellEditorRendererParams): void;
    }

class MyCustomEditorRenderer implements ICellEditorRendererAngularComp {
  // ...
  agInit(props: IRichCellEditorRendererParams): void {
    this.value = props.value;
  }
  // ...

Search Values Copy Link

Different types of search are possible within the editor list as shown below:

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: ColourCellRenderer,
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            allowTyping: true,
            filterList: true,
            highlightMatch: true,
            valueListMaxHeight: 220
        }
        // ...other props
    }
]

Allow Typing Copy Link

The editor input can be configured to allow text input, which is used to match different parts of the editor list items as shown below:

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: ColourCellRenderer,
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            allowTyping: true,
            filterList: true,
            highlightMatch: true,
            valueListMaxHeight: 220
        }
        // ...other props
    }
]

Format Values Copy Link

Items in the editor list can be formatted as shown below:

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
            formatValue: value => value.toUpperCase()
        }
        // ...other props
    }
]

Multi Selection Copy Link

The editor can be configured to allow the selection of multiple values as shown below:

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            multiSelect: true,
            searchType: 'matchAny',
            filterList: true,
            highlightMatch: true,
            valueListMaxHeight: 220
        }
        // ...other props
    }
]

Complex Objects Copy Link

When working with complex objects, a formatValue callback function is required to convert that complex object into a string that can be rendered by the Rich Select Editor. If the Grid Column being edited is not using complex values, or if the Rich Select Editor value object has a different format (different properties) than the object used by the Grid Column, a parseValue callback function is required to convert the editor format into the grid column's format.

const colors = [
  { name: "Pink", code: "#FFC0CB" },
  // ...other values
];

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        valueFormatter: (p) => `${p.value.name} (${p.value.code})`,
        valueParser: (p) => p.newValue,
        cellDataType: 'object',
        cellEditorParams: {
            values: colors,
            formatValue: (v) => v.name,
            allowTyping: true,
            filterList: true,
        }
        // ...other props
    }
]

Async Values Copy Link

Overview Copy Link

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

function fetchLanguages(_params: RichCellEditorValuesCallbackParams): Promise<string[]> {
  return new Promise((resolve) => {
    setTimeout(() => resolve(['English', 'Spanish', 'French', 'Portuguese', '(other)']), 1000);
  });
}

columnDefs: [
    {
        headerName: 'Language',
        field: 'language',
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: fetchLanguages,
        }
    }
]

Paged Async Values Copy Link

For large datasets, valuesPage avoids loading everything at once.

In paged mode the editor requests row ranges (and optional cursor tokens), rather than a single full list.

Requests always include startRow and endRow. cursor is optional: it is undefined on the first request, then for forward paging it is automatically populated from the previous page result.

You can use valuesPageInitialStartRow to open around the current value while still allowing navigation to earlier and later pages.

function getLanguagesPage(params: RichCellEditorValuesPageParams): Promise<RichCellEditorValuesPageResult<string>> {
    return fetch(
        `/api/languages?startRow=${params.startRow}&endRow=${params.endRow}&cursor=${encodeURIComponent(params.cursor ?? '')}`
    ).then((res) => res.json());
}

columnDefs: [
    {
        headerName: 'Language',
        field: 'language',
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            valuesPage: getLanguagesPage,
            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:

function fetchLanguages(params: RichCellEditorValuesCallbackParams): Promise<string[]> {
    return fetch(`/api/languages?search=${encodeURIComponent(params.search)}`)
        .then(res => res.json())
        .then(data => data.items as string[]);
}

columnDefs: [
    {
        headerName: 'Language',
        field: 'language',
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            allowTyping: true,
            filterList: true,
            filterListAsync: true,
            values: fetchLanguages
        }
    }
]

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 for cursor-based forward pagination APIs (undefined on the first request, then replayed from the previous response).

You can implement either strategy in your datasource:

• Range-based: use startRow / endRow and return lastRow.
• Cursor-based: use cursor for forward pages and still tolerate startRow / endRow for initial positioning and upward loading.

function getFilteredLanguagesPage(
    params: RichCellEditorValuesPageParams
): Promise<RichCellEditorValuesPageResult<string>> {
    return fetch(
        `/api/languages?search=${encodeURIComponent(params.search)}&startRow=${params.startRow}&endRow=${params.endRow}&cursor=${encodeURIComponent(params.cursor ?? '')}`
    ).then((res) => res.json());
}

columnDefs: [
    {
        headerName: 'Language',
        field: 'language',
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            allowTyping: true,
            filterList: true,
            filterListAsync: true,
            valuesPage: getFilteredLanguagesPage,
            valuesPageInitialStartRow: (value) => getRowForSelectedValue(value),
            valuesPageSize: 100,
            valuesPageLoadThreshold: 10
        }
    }
]

API Reference Copy Link

Continue to the next section: Number Cell Editor.