JavaScript 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

The Rich Select Editor can be customised to give the desired results. See the Customisation page for details:

• Cell Renderer - use a cell renderer within the editor
• Format Values - format values within the list
• Search Values - different types of search matching
• Allow Typing - allow text input to match list items
• Multi Selection - allow the selection of multiple values
• Complex Objects - configure support for items that are complex objects

Async Values Copy Link

The Rich Select editor can be configured to load values asynchronously. For large datasets the editor supports paging async values as well as filtering values asynchronously on a server. See the Async Values page for details:

• Async Values - load all values asynchronously
• Paged Async Values - load pages as the user scrolls
• Async Filtering - return filtered values asynchronously
• Paged Async Filtering - combine paged loading with filtering

API Copy Link

See all properties available on the IRichCellEditorParams interface.