Getting Started

Setup

Tutorials

Compatibility & Security

AI Features

Layout & Styling

Theming

Charting

Sparklines

Integrated Charts

Standalone Charts

Core Features

Columns

Rows

Cells

Filtering

Selection

Editing

Updating Data

Interactivity

Advanced Features

Row Grouping

Aggregation

Pivoting

Tree Data

Master Detail

Accessories

Server-Side Data

Import & Export

State & Lifecycle

Performance

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

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

Angular Example - Provided Cell Editors Rich Select - Rich Select Editor

Hide filesViewing: app.component.ts

• main.ts
• app.component.ts

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

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

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

See all properties available on the IRichCellEditorParams interface.