---
product: "AG Grid"
title: "Rich Select Cell Editor - Customisation"
description: "The Rich Select Cell Editor supports cell renderers, value formatting, search and typing behaviour, multi-selection, and complex object values."
enterprise: true
framework: angular
version: "36.2.0"
related:
    - title: "Async Values"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/provided-cell-editors-rich-select-async/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Rich 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

The cell renderer used within the editor can be customised as shown below:

#### Rich Select with Cell Renderer

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";
import { colors } from "./colors";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  RichSelectModule,
]);
import { ColourCellRenderer } from "./colour-cell-renderer.component";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular, ColourCellRenderer],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      headerName: "Rich Select Editor",
      field: "color",
      cellRenderer: ColourCellRenderer,
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: {
        values: colors,
        cellRenderer: ColourCellRenderer,
        valueListMaxHeight: 220,
      } as IRichCellEditorParams,
    },
  ];
  defaultColDef: ColDef = {
    width: 200,
    editable: true,
  };
  rowData: any[] | null = data;
}

function getRandomNumber(min: number, max: number) {
  // min and max included
  return Math.floor(window.agRandom() * (max - min + 1) + min);
}
const data = Array.from(Array(20).keys()).map(() => {
  const color = colors[getRandomNumber(0, colors.length - 1)];
  return { color };
});
```

[Live example: Rich Select with Cell Renderer](https://www.ag-grid.com/archive/36.2.0/examples/provided-cell-editors-rich-select-customisation/rich-select-cell-renderer/angular/)

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: ColourCellRenderer,
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            cellRenderer: ColourCellRenderer,
            valueListMaxHeight: 220
        }
        // ...other props
    }
]
```

The interface for the Rich CellEditor Component is as follows:

```ts
interface ICellEditorRendererAngularComp {
    // Mandatory - Params for rendering
    agInit(params: IRichCellEditorRendererParams): void;
    }
```

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

```ts
class MyCustomEditorRenderer implements ICellEditorRendererAngularComp {
  // ...
  agInit(props: IRichCellEditorRendererParams): void {
    this.value = props.value;
  }
  // ...
```

The provided `props` (interface IRichCellEditorRendererParams) are:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `cellRendererParams` | `any` |  |  |  |
| `value` | `TValue[] \| TValue \| null` |  |  |  |
| `valueFormatted` | `string` |  |  |  |
| `getValue` | `Function` |  |  |  |
| `setValue` | `Function` |  |  |  |
| `setTooltip` | `Function` |  |  |  |
| `api` | `GridApi` |  |  |  |
| `context` | `TContext` |  |  |  |

## Search Values

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `searchType` | `'match' \| 'matchAny' \| 'fuzzy'` |  |  |  |

#### Rich Select Editor

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";
import { colors } from "./colors";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  RichSelectModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      headerName: "Fuzzy Search",
      field: "color",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: {
        values: colors,
      } as IRichCellEditorParams,
    },
    {
      headerName: "Match Search",
      field: "color",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: {
        values: colors,
        searchType: "match",
      } as IRichCellEditorParams,
    },
    {
      headerName: "Match Any Search",
      field: "color",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: {
        values: colors,
        searchType: "matchAny",
      } as IRichCellEditorParams,
    },
  ];
  defaultColDef: ColDef = {
    width: 200,
    editable: true,
  };
  rowData: any[] | null = data;
}

function getRandomNumber(min: number, max: number) {
  // min and max included
  return Math.floor(window.agRandom() * (max - min + 1) + min);
}
const data = Array.from(Array(20).keys()).map(() => {
  const color = colors[getRandomNumber(0, colors.length - 1)];
  return { color };
});
```

[Live example: Rich Select Editor](https://www.ag-grid.com/archive/36.2.0/examples/provided-cell-editors-rich-select-customisation/rich-select-search-values/angular/)

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            searchType: 'match',
        }
        // ...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:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `allowTyping` | `boolean` |  |  |  |

#### Rich Select Editor

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";
import { colors } from "./colors";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  RichSelectModule,
]);
import { ColourCellRenderer } from "./colour-cell-renderer.component";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular, ColourCellRenderer],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      headerName: "Allow Typing (Match)",
      field: "color",
      cellRenderer: ColourCellRenderer,
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: {
        values: colors,
        searchType: "match",
        allowTyping: true,
        filterList: true,
        highlightMatch: true,
        valueListMaxHeight: 220,
      } as IRichCellEditorParams,
    },
    {
      headerName: "Allow Typing (MatchAny)",
      field: "color",
      cellRenderer: ColourCellRenderer,
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: {
        values: colors,
        searchType: "matchAny",
        allowTyping: true,
        filterList: true,
        highlightMatch: true,
        valueListMaxHeight: 220,
      } as IRichCellEditorParams,
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    editable: true,
  };
  rowData: any[] | null = data;
}

function getRandomNumber(min: number, max: number) {
  // min and max included
  return Math.floor(window.agRandom() * (max - min + 1) + min);
}
const data = Array.from(Array(20).keys()).map(() => {
  const color = colors[getRandomNumber(0, colors.length - 1)];
  return { color };
});
```

[Live example: Rich Select Editor](https://www.ag-grid.com/archive/36.2.0/examples/provided-cell-editors-rich-select-customisation/rich-select-allow-typing/angular/)

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: ColourCellRenderer,
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            allowTyping: true,
            filterList: true,
            highlightMatch: true,
        }
        // ...other props
    }
]
```

## Format Values

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `formatValue` | `Function` |  |  |  |

#### Rich Select Format Values

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  RichSelectModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      headerName: "Rich Select Editor",
      field: "language",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: {
        values: languages,
        formatValue: (values) => values.toUpperCase(),
      } as IRichCellEditorParams,
    },
  ];
  defaultColDef: ColDef = {
    width: 200,
    editable: true,
  };
  rowData: any[] | null = new Array(100)
    .fill(null)
    .map(() => ({ language: languages[getRandomNumber(0, 4)] }));
}

const languages = ["English", "Spanish", "French", "Portuguese", "(other)"];
function getRandomNumber(min: number, max: number) {
  // min and max included
  return Math.floor(window.agRandom() * (max - min + 1) + min);
}
```

[Live example: Rich Select Format Values](https://www.ag-grid.com/archive/36.2.0/examples/provided-cell-editors-rich-select-customisation/rich-select-format-values/angular/)

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
            formatValue: value => value.toUpperCase()
        }
        // ...other props
    }
]
```

## Multi Selection

The editor can be configured to allow the selection of multiple values as shown below:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `multiSelect` | `boolean` |  |  |  |
| `suppressMultiSelectPillRenderer` | `boolean` |  |  |  |

#### Rich Select Editor

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  ValueFormatterParams,
  ValueParserParams,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";
import { colors } from "./colors";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  RichSelectModule,
]);
import { ColourCellRenderer } from "./colour-cell-renderer.component";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular, ColourCellRenderer],
  template: `<div class="container">
    <div class="controls">
      <label class="option">
        <input
          id="allow-typing"
          class="js-rich-select-toggle"
          (change)="applyExampleConfig()"
          type="checkbox"
        />
        allowTyping
      </label>
      <label class="option">
        <input
          id="suppress-multi-select-pill-renderer"
          class="js-rich-select-toggle"
          (change)="applyExampleConfig()"
          type="checkbox"
        />
        suppressMultiSelectPillRenderer
      </label>
      <label class="option">
        <input
          id="custom-cell-renderer"
          class="js-rich-select-toggle"
          (change)="applyExampleConfig()"
          type="checkbox"
        />
        Custom Cell Renderer
      </label>
    </div>
    <div class="grid-wrapper">
      <ag-grid-angular
        style="width: 100%; height: 100%;"
        [defaultColDef]="defaultColDef"
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        (gridReady)="onGridReady($event)"
      />
    </div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  defaultColDef: ColDef = {
    flex: 1,
    editable: true,
    valueFormatter: valueFormatter,
    valueParser: valueParser,
  };
  columnDefs: ColDef[] = getColumnDefs(config);
  rowData: any[] | null = data;

  applyExampleConfig(): void {
    config.allowTyping = getCheckboxValue("#allow-typing");
    config.suppressMultiSelectPillRenderer = getCheckboxValue(
      "#suppress-multi-select-pill-renderer",
    );
    config.useCustomCellRenderer = getCheckboxValue("#custom-cell-renderer");
    if (this.gridApi) {
      const activeEdit = this.gridApi.getEditingCells()[0];
      if (activeEdit) {
        this.gridApi.stopEditing();
      }
      this.gridApi.setGridOption("columnDefs", getColumnDefs(config));
      if (activeEdit) {
        requestAnimationFrame(() => {
          this.gridApi.startEditingCell({
            rowIndex: activeEdit.rowIndex,
            rowPinned: activeEdit.rowPinned,
            colKey: "colors",
          });
        });
      }
    }
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;
  }
}

const valueFormatter = (params: ValueFormatterParams) => {
  const { value } = params;
  if (Array.isArray(value)) {
    return value.join(", ");
  }
  return value;
};
const valueParser = (params: ValueParserParams) => {
  const { newValue } = params;
  if (newValue == null || newValue === "") {
    return null;
  }
  if (Array.isArray(newValue)) {
    return newValue;
  }
  return params.newValue.split(",");
};
const config: MultiSelectExampleConfig = {
  allowTyping: false,
  suppressMultiSelectPillRenderer: false,
  useCustomCellRenderer: false,
};
function getColumnDefs(exampleConfig: MultiSelectExampleConfig): ColDef[] {
  const {
    allowTyping,
    suppressMultiSelectPillRenderer,
    useCustomCellRenderer,
  } = exampleConfig;
  return [
    {
      headerName: "Colours",
      field: "colors",
      cellRenderer: useCustomCellRenderer ? ColourCellRenderer : undefined,
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: {
        values: colors,
        cellRenderer: useCustomCellRenderer ? ColourCellRenderer : undefined,
        allowTyping,
        suppressMultiSelectPillRenderer,
        multiSelect: true,
        searchType: "matchAny",
        filterList: true,
        highlightMatch: true,
        valueListMaxHeight: 220,
      } as IRichCellEditorParams,
    },
  ];
}
function getRandomNumber(min: number, max: number) {
  // min and max included
  return Math.floor(window.agRandom() * (max - min + 1) + min);
}
const data = Array.from(Array(20).keys()).map(() => {
  const numberOfOptions = getRandomNumber(1, 4);
  const selectedOptions: string[] = [];
  for (let i = 0; i < numberOfOptions; i++) {
    const color = colors[getRandomNumber(0, colors.length - 1)];
    if (selectedOptions.indexOf(color) === -1) {
      selectedOptions.push(color);
    }
  }
  selectedOptions.sort();
  return { colors: selectedOptions };
});
function getCheckboxValue(id: string): boolean {
  return document.querySelector<HTMLInputElement>(id)?.checked ?? false;
}
```

[Live example: Rich Select Editor](https://www.ag-grid.com/archive/36.2.0/examples/provided-cell-editors-rich-select-customisation/rich-select-multi-select/angular/)

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            multiSelect: true,
        }
        // ...other props
    }
]
```

## Complex Objects

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.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `formatValue` | `Function` |  |  |  |
| `parseValue` | `Function` |  |  |  |

> **Note**
>
> 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`.

#### Rich Select Editor

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";
import { colors } from "./colors";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  RichSelectModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      headerName: "Color (Column as String Type)",
      field: "color",
      width: 250,
      cellEditorParams: {
        formatValue: (v) => v.name,
        parseValue: (v) => v.name,
        values: colors,
        searchType: "matchAny",
        allowTyping: true,
        filterList: true,
        valueListMaxHeight: 220,
      } as IRichCellEditorParams,
    },
    {
      headerName: "Color (Column as Complex Object)",
      field: "detailedColor",
      width: 290,
      valueFormatter: (p) => `${p.value.name} (${p.value.code})`,
      valueParser: (p) => p.newValue,
      cellDataType: "object",
      cellEditorParams: {
        formatValue: (v) => v.name,
        values: colors,
        searchType: "matchAny",
        allowTyping: true,
        filterList: true,
        valueListMaxHeight: 220,
      } as IRichCellEditorParams,
    },
  ];
  defaultColDef: ColDef = {
    width: 200,
    editable: true,
    cellEditor: "agRichSelectCellEditor",
  };
  rowData: any[] | null = colors.map((v) => ({
    color: v.name,
    detailedColor: v,
  }));
}
```

[Live example: Rich Select Editor](https://www.ag-grid.com/archive/36.2.0/examples/provided-cell-editors-rich-select-customisation/rich-select-complex-objects/angular/)

```js
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

Properties available on the `IRichCellEditorParams&lt;TData = any, TValue = any, GValue = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `values` | `TValue[] \| RichCellEditorValuesCallback` |  |  |  |
| `valuesPage` | `RichCellEditorValuesPageCallback` |  |  |  |
| `valuesPageInitialStartRow` | `number \| RichCellEditorValuesPageStartRowCallback` |  |  |  |
| `valuesPageSize` | `number` |  |  |  |
| `valuesPageLoadThreshold` | `number` |  |  |  |
| `cellHeight` | `number` |  |  |  |
| `cellRenderer` | `any` |  |  |  |
| `cellRendererParams` | `any` |  |  |  |
| `allowTyping` | `boolean` |  |  |  |
| `filterList` | `boolean` |  |  |  |
| `filterListAsync` | `boolean` |  |  |  |
| `searchType` | `'match' \| 'matchAny' \| 'fuzzy'` |  |  |  |
| `highlightMatch` | `boolean` |  |  |  |
| `multiSelect` | `boolean` |  |  |  |
| `suppressDeselectAll` | `boolean` |  |  |  |
| `suppressMultiSelectPillRenderer` | `boolean` |  |  |  |
| `searchDebounceDelay` | `number` |  |  |  |
| `valuePlaceholder` | `string` |  |  |  |
| `valueListGap` | `number` |  |  |  |
| `valueListMaxHeight` | `number \| string` |  |  |  |
| `valueListMaxWidth` | `number \| string` |  |  |  |
| `formatValue` | `Function` |  |  |  |
| `parseValue` | `Function` |  |  |  |