# Custom Editors Support

## Content

The Wijmo DataGrid provides support of using the Wijmo Input controls as custom editors in the cells to customize the editing experience.
This can be done by assigning the instance of the Input editor control to the column's **editor** property.
For more details and a sample, visit the [Wijmo documentation.](https://developer.mescius.com/wijmo/demos/Grid/Editing/CustomEditors/purejs "https://developer.mescius.com/wijmo/demos/Grid/Editing/CustomEditors/purejs")
This page describes the support and some restrictions of using the Input controls as custom editors in the DataGrid.

## Grid controls with Custom Editor

Custom editors are supported in the following grid controls:

* FlexGrid
* MultiRow
* FlexSheet
* TransposedGrid
* TransposedMultiRow

## Input Controls as Custom Editors

| **Supported** | **Unsupported** |
| --------- | ----------- |
| <ul><li>AutoComplete </li><li>ComboBox </li><li>InputColor </li><li>InputDate </li><li>InputTime</li><li>InputDateTime </li><li>InputNumber </li><li>InputMask </li><li>MultiSelect </li></ul> | <ul><li>Calendar </li><li>ColorPicker </li><li>InputDateRange </li><li>ListBox </li><li>Menu </li><li>MultiAutoComplete </li><li>MultiSelectListBox </li></ul> |

## Features for Wijmo Input Controls as Custom Editors in DataGrid

| **Controls** | **Supported** | **Unsupported** | **Common Features** |
| -------- | --------- | ----------- | --------------- |
| AutoComplete | <ul><li>Searching Items </li></ul> | - | @rows=5:Accessing the control dropdown and selecting desired item <ul><li>Editing the values </li><li>Styling controls (*using CSS classes*) </li><li>Using control API</li></ul> |
| <ul><li>InputDate</li><li>InputTime</li><li>InputDateTime </li></ul> | <ul><li>Accessing calendar in dropdown (InputDate, InputDateTime) </li><li>Setting formats (**format** property\*)\* </li></ul> | - |
| InputNumber | <ul><li>Setting formats (**format** property\*)*Using Increase/Decrease buttons to edit the value (**step** property*)\*</li></ul> | - |
| InputMask | <ul><li>Setting different masks</li></ul> | - |
| MuliSelect | <ul><li>Binding to string/array type data </li><li>Selecting multiple values by checking/unchecking items</li><li>Filtering values from the list (**showFilterInput** property\*)\*</li></ul> | <ul><li>Grouping grid rows with MultiSelect column</li><li>Using Condition filter in MultiSelect column</li><li>Searching "*...items selected*" placeholder text in MultiSelect cells via FlexGridSearch </li><li>Binding to Grid’s data source and configuring MultiSelect items with **selectedValuePath** and **displayMemberPath** properties</li><li>Using **checkedItems** and **checkedMemberPath** properties </li></ul> |

## DataGrid Features with Custom Editors

| **Controls** | **Supported** | **Unsupported** |
| -------- | --------- | ----------- |
| FlexGrid<br>MultiRow<br>FlexSheet | <ul><li>Data binding from different sources </li><li>Editing <ul><li>EN input - Quick and full editing modes </li><li>JP IME input - Only full editing mode </li></ul></li><li>Grouping (via *groupDescriptions/GroupPanel*) </li><li>Paging </li><li>Formatting <ul><li>Column groups </li><li>Column formats (number, date, etc.) </li><li>Custom content (via *formatItem/itemFormatter*)</li><li>Styling cells (via *cssClass/cssClassAll, formatItem/itemFormatter*)</li></ul></li><li>Filtering (via *FlexGridFilter*) </li><li>Searching (via *FlexGridSearch*) </li><li>Freezing rows/columns  </li><li>Selection<ul><li>With different selection modes</li><li>With BooleanChecker and Selector</li></ul></li><li>Merging  </li><li>Row Details  </li><li>Validation </li><li>Grid operations<ul><li>Scrolling </li><li>Dragging </li><li>Resizing </li><li>Sorting </li><li>Pinning </li></ul></li><li>Using control API</li></ul> | Quick editing with JP IME input |

## Custom Editors in Transposed Layouts

Custom editors are supported in transposed layouts.
Because transposed layouts represent properties as rows rather than columns, the `editor` property is assigned differently:

* **TransposedGrid**
    Assign the `editor` property to row definitions or to leaf rows within `rowGroups`
* **TransposedMultiRow**
    Assign the `editor` property to leaf cells within `layoutDefinition`.

Transposed layouts use the same supported editor types and behavior model as other grid controls.