AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting Started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
AI ToolkitMCP ServerSkills
Layout & Styling
Design SystemGrid Layout
Charting
Core Features
Advanced Features

JavaScript Data GridRich Select Cell Editor - Customisation

Version 36.2.0
Enterprise

The Rich Select Cell Editor supports cell renderers, value formatting, search and typing behaviour, multi-selection, and complex object values.

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

The interface for the Cell Component is as follows:

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

The Component is provided props containing, amongst other things, the value to be rendered.

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

The provided props (interface IRichCellEditorRendererParams) are:

cellRendererParamsCopy Link
any
any
valueCopy Link
TValue[] | TValue | null
The value to be rendered by the renderer. May be null — for example on group rows or when the field is absent from the row data; the renderer must handle this.
valueFormattedCopy Link
string
The value to be renderer by the renderer formatted by the editor
getValueCopy Link
Function
Gets the current value of the editor
setValueCopy Link
Function
Sets the value of the editor
setTooltipCopy Link
Function
Used to set a tooltip to the renderer
apiCopy Link
GridApi
The grid api.
contextCopy Link
TContext
Application context as set on gridOptions.context.

Search Values Copy Link

Different types of search are possible within the editor list as shown below:

searchTypeCopy Link
'match' | 'matchAny' | 'fuzzy'
default: 'fuzzy'
The type of search algorithm that is used when searching for values.
  • match - Matches if the value starts with the text typed.
  • matchAny - Matches if the value contains the text typed.
  • fuzzy - Matches the closest value to text typed.
    • Note: When a cellRenderer is specified, this option will not work. 
    columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            searchType: 'match',
        }
        // ...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:

    allowTypingCopy Link
    boolean
    default: false
    Set to true to be able to type values in the display area. 
    columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: ColourCellRenderer,
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            allowTyping: true,
            filterList: true,
            highlightMatch: true,
        }
        // ...other props
    }
]

    Format Values Copy Link

    Items in the editor list can be formatted as shown below:

    formatValueCopy Link
    Function
    A callback function that allows you to change the displayed value for simple data. The value argument may be null or undefined; the callback must handle this. 
    columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
            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:

    multiSelectCopy Link
    boolean
    If true this component will allow multiple items from the list of values to be selected.
    suppressMultiSelectPillRendererCopy Link
    boolean
    When multiSelect=true the editor will automatically show the selected items as "pills". Set this property to true suppress this behaviour. 
    columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            multiSelect: true,
        }
        // ...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.

    formatValueCopy Link
    Function
    A callback function that allows you to change the displayed value for simple data. The value argument may be null or undefined; the callback must handle this.
    parseValueCopy Link
    Function
    A callback function that allows you to convert the value of the Rich Select Editor to the data format of the Grid Column when they are different.

    When working with Cell Renderers, a formatValue callback should still be provided so it will be possible to use functionality that relies on string values such as allowTyping.

     
    const colors = [
  { name: "Pink", code: "#FFC0CB" },
  // ...other values
];

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        valueFormatter: (p) => `${p.value.name} (${p.value.code})`,
        valueParser: (p) => p.newValue,
        cellDataType: 'object',
        cellEditorParams: {
            values: colors,
            formatValue: (v) => v.name,
        }
        // ...other props
    }
]

    API Copy Link

    Properties available on the IRichCellEditorParams<TData = any, TValue = any, GValue = any> interface.

    valuesCopy Link
    TValue[] | RichCellEditorValuesCallback
    The list of values to be selected from. Required when valuesPage is not provided.
    valuesPageCopy Link
    RichCellEditorValuesPageCallback
    Optional paged datasource for very large value lists. When provided, values are loaded incrementally and additional pages are requested as the user scrolls. If both values and valuesPage are set, valuesPage takes precedence.
    valuesPageInitialStartRowCopy Link
    number | RichCellEditorValuesPageStartRowCallback
    default: 0
    Initial page start row when using valuesPage. Can be a fixed number or a callback that derives the start row from the current editor value. Only applied for the initial, unfiltered load. Filtered searches always start from row 0.
    valuesPageSizeCopy Link
    number
    default: 100
    Number of rows requested per page when using valuesPage.
    valuesPageLoadThresholdCopy Link
    number
    default: 10
    Number of rows from the end of the loaded list at which the next page is requested.
    cellHeightCopy Link
    number
    The row height, in pixels, of each value.
    cellRendererCopy Link
    any
    The cell renderer to use to render each value. Cell renderers are useful for rendering rich HTML values, or when processing complex data.
    cellRendererParamsCopy Link
    any
    The custom parameters to be used by the cell render.
    allowTypingCopy Link
    boolean
    default: false
    Set to true to be able to type values in the display area.
    filterListCopy Link
    boolean
    default: false
    If true it will filter the list of values as you type (only relevant when allowTyping=true).
    filterListAsyncCopy Link
    boolean
    default: false
    Set to true to enable asynchronous filtering of values via the values or valuesPage callback. (only relevant when allowTyping=true and filterList=true).
    searchTypeCopy Link
    'match' | 'matchAny' | 'fuzzy'
    default: 'fuzzy'
    The type of search algorithm that is used when searching for values.
  • match - Matches if the value starts with the text typed.
  • matchAny - Matches if the value contains the text typed.
  • fuzzy - Matches the closest value to text typed.
    • Note: When a cellRenderer is specified, this option will not work.
    highlightMatchCopy Link
    boolean
    default: false
    If true, each item on the list of values will highlight the part of the text that matches the input. Note: It only makes sense to use this option when filterList is true and searchType is not fuzzy.
    multiSelectCopy Link
    boolean
    If true this component will allow multiple items from the list of values to be selected.
    suppressDeselectAllCopy Link
    boolean
    If true the option to remove all selected options will not be displayed. Note: This feature only works when multiSelect=true.
    suppressMultiSelectPillRendererCopy Link
    boolean
    When multiSelect=true the editor will automatically show the selected items as "pills". Set this property to true suppress this behaviour.
    searchDebounceDelayCopy Link
    number
    default: 300
    The value in ms for the search algorithm debounce delay
    valuePlaceholderCopy Link
    string
    A string value to be used when no value has been selected.
    valueListGapCopy Link
    number
    default: 4
    The space in pixels between the value display and the list of items.
    valueListMaxHeightCopy Link
    number | string
    default: 'calc(var(--ag-row-height) * 6.5)'
    The maximum height of the list of items. If the value is a number it will be treated as pixels, otherwise it should be a valid CSS size string.
    valueListMaxWidthCopy Link
    number | string
    The maximum width of the list of items. If the value is a number it will be treated as pixels, otherwise it should be a valid CSS size string. Default: Width of the cell being edited.
    formatValueCopy Link
    Function
    A callback function that allows you to change the displayed value for simple data. The value argument may be null or undefined; the callback must handle this.
    parseValueCopy Link
    Function
    A callback function that allows you to convert the value of the Rich Select Editor to the data format of the Grid Column when they are different.