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

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

Cell Renderer

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 ICellEditorRendererComp {
    // Optional - props for rendering.
    init?(props: IRichCellEditorRendererParams): void;

    // Mandatory - Return the DOM element of the component, this is what the grid puts into the cell
    getGui(): HTMLElement;

    // Optional - Gets called once by grid after rendering is finished - if your renderer needs to do any cleanup,
    // do it here
    destroy?(): void;
}

class MyCustomEditorRenderer {
    // ...
    init(props) {
        // create the cell
        this.eGui = document.createElement('div');
        this.eGui.innerHTML = props.value;
    }
    // ...
}

Search Values

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

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

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

When working with objects as values, you need to specify a keyCreator function within the column definition to enable more complex features of the rich select cell editor.

The Key Creator generates a unique string key from the complex object which is used for grouping, Set filtering, and searching within the cell editor dropdown.

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

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

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

Continue to the next section: Number Cell Editor.