Vue 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

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

Cell Renderer Copy

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

  // ...
  beforeMount() {
    this.cellValue = this.params.value;
  }
  // ...

Search Values Copy

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

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

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

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

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

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

Continue to the next section: Number Cell Editor.