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
    }
]

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',
        keyCreator: params => params.value.name,
        cellEditorParams: {
            values: colors,
            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
    }
]

Async Values Copy Link

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

The values property can receive a Promise that resolves an array of values.

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

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: getValueFromServer,
        }
        // ...other props
    }
]

API Reference Copy Link

Continue to the next section: Number Cell Editor.