Angular Data GridRich Select Cell Editor - Customisation

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

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',
        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:

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:

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:

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.

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