
# [Dropdown editor](/refs/Interface/DropDownCellEditor#drop)

[Dropdown Editor](/refs/Interface/DropDownCellEditor#drop) selects one value from the list specified by the `values` attribute. Additionally, you can specify text to be displayed in the drop-down list instead of `values` in `labels`.
The number of items in `labels` must be the same as the number of items in `values`, and if a value not in the list is entered, the original value is displayed.
If `values` and `labels` are not specified in the editor, the list of `values` and `labels` specified in the column or the list of `lookupSource` will be used instead, so there is **no need** to specify them separately unless in special cases.

And the lookupDisplay property must be set to true to be displayed as a label value in the grid.

```js
const fields = [
  {
    fieldName: "OrderID",
    dataType: "text"
  },
  {
    fieldName: "CustomerID"
  },
  {
    fieldName: "EmployeeID"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat:"yyyy-MM-dd"
  },
  {
    fieldName: "CompanyName"
  },
  {
    fieldName: "Country"
  },
  {
    fieldName: "CountryKor"
  },
  {
    fieldName: "Phone"
  },
  {
    fieldName: "ProductName"
  },
  {
    fieldName: "QuantityPerUnit"
  },
  {
    fieldName: "Quantity",
    dataType: "number"
  },
  {
    fieldName: "UnitPrice",
    dataType: "number"
  }
];

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "CustomerIDRaw",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    header: {
      text: "Raw Data",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    editButtonVisibility: "always",
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "RATTC",
      "WARTH"
    ],
    labels: [
      "Vins et alcools Chevalier",
      "Hanari Carnes",
      "Suprêmes délices",
      "Victuailles en stock",
      "Rattlesnake Canyon Grocery",
      "Wartian Herkku"
    ],
    editor: {
      type: "dropdown"
    },
    header: {
      text: "DropDown",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    editButtonVisibility: "always",
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "RATTC",
      "WARTH"
    ],
    labels: [
      "Vins et alcools Chevalier",
      "Hanari Carnes",
      "Suprêmes délices",
      "Victuailles en stock",
      "Rattlesnake Canyon Grocery",
      "Wartian Herkku"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true
    },
    header: {
      text: "dropdown.domainOnly, textReadOnly",
      styleName: "orange-column"
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    editButtonVisibility: "always",
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "dropdown.partialMatch",
      styleName: "orange-column"
    }
  },
  {
    name: "CompanyName",
    fieldName: "CompanyName",
    width: "200",
    editor: {
      type: "multiline",
      textCase: "upper"
    },
    header: {
      text: "Multiline Edit"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.##",
      multipleChar: "+"
    },
    header: {
      text: "Number Edit"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        gridView.refresh();
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
...
//Column settings
   {
     name: "CustomerID",
     fieldName: "CustomerID",
     width: 150,
     sortable: false;
     lookupDisplay: true;
     values: [
         "VINET",
         "HANAR",
         "SUPRD",
         "VICTE",
         "RATC",
         "WARTH"
     ],
     labels: [
         "Vins et alcools Chevalier",
         "Hanari Carnes",
         "Suprêmes délices",
         "Victuailles en stock",
         "Rattlesnake Canyon Grocery",
         "Wartian Herkku"
     ],
     editor: {
         type: "dropdown"
     },
     header: {
         text: "DropDown",
         styleName: "orange-column"
     }
   },

...
```

If `domainOnly` is true, only values in the list can be selected.
If `textReadOnly` is true, keystrokes are disabled and only selection is possible.

```js
...
//Column settings
   {
     name: "CustomerID2",
     fieldName: "CustomerID",
     width: 150,
     sortable: false;
     lookupDisplay: true;
     values: [
         "VINET",
         "HANAR",
         "SUPRD",
         "VICTE",
         "RATC",
         "WARTH"
     ],
     labels: [
         "Vins et alcools Chevalier",
         "Hanari Carnes",
         "Suprêmes délices",
         "Victuailles en stock",
         "Rattlesnake Canyon Grocery",
         "Wartian Herkku"
     ],
     editor: {
         type: "dropdown",
         dropDownCount: 4;
         domainOnly: true;
         textReadOnly: true
     },
     header: {
         text: "dropdown.domainOnly, textReadOnly",
         styleName: "orange-column"
     }
   },
...
```


Even if `partialMacth` only matches a partial string with the user's keystrokes in the editor, it can be searched for and selected.

```js
...
//Column settings
   {
     name: "CountryKor",
     fieldName: "Country",
     width: "150",
     sortable: false;
     lookupDisplay: true;
     values: [
         "Austria",
         "Belgium",
         "Brazil",
         "Finland",
         "France",
         "Germany",
         "Ireland",
         "Italy",
         "Mexico",
         "Spain",
         "Sweden",
         "Switzerland",
         "UK",
         "USA",
         "Venezuela"
     ],
     labels: [
         "Austria",
         "Belgium",
         "brazil",
         "Finland",
         "france",
         "germany",
         "Ireland",
         "Italy",
         "Mexico",
         "Spain",
         "Sweden",
         "Swiss",
         "uk",
         "USA",
         "Venezuela"
     ],
     editor: {
         type: "dropdown",
         dropDownCount: 5;
         partialMatch: true
     },
     header: {
         text: "dropdown.partialMatch",
         styleName: "orange-column"
     }
   },
...
```

## editor.values, labels

This property is not used except in special cases.
On the grid screen, all values specified in values and labels are visible, but when the drop-down editor is expanded, it is used to allow selection from a different list or only a part of the list.
In the example below, all values appear as label values, but when you open the dropdown editor, only two lists are visible.

```js
const fields = [
  {
    fieldName: "OrderID",
    dataType: "text"
  },
  {
    fieldName: "CustomerID"
  },
  {
    fieldName: "EmployeeID"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat:"yyyy-MM-dd"
  },
  {
    fieldName: "CompanyName"
  },
  {
    fieldName: "Country"
  },
  {
    fieldName: "CountryKor"
  },
  {
    fieldName: "Phone"
  },
  {
    fieldName: "ProductName"
  },
  {
    fieldName: "QuantityPerUnit"
  },
  {
    fieldName: "Quantity",
    dataType: "number"
  },
  {
    fieldName: "UnitPrice",
    dataType: "number"
  }
];

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "CountryRaw",
    fieldName: "Country",
    width: "150",
    sortable: false,
    header: {
      text: "Raw Data",
      styleName: "orange-column"
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    editButtonVisibility: "always",
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "column.values, labels",
      styleName: "orange-column"
    }
  },
  {
    name: "CountryKor2",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    editButtonVisibility: "always",
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 5,
      values: [
        "Brazil",
        "Germany"
      ],
      labels: [
        "Brazil",
        "Germany"
      ]
    },
    header: {
      text: "editor.values, labels",
      styleName: "orange-column"
    }
  },
  {
    name: "CompanyName",
    fieldName: "CompanyName",
    width: "200",
    editor: {
      type: "multiline",
      textCase: "upper"
    },
    header: {
      text: "Multiline Edit"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.##",
      multipleChar: "+"
    },
    header: {
      text: "Number Edit"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        gridView.refresh();
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
...
//Column settings
   {
     name: "CountryKor",
     fieldName: "Country",
     width: "150",
     sortable: false;
     lookupDisplay: true;
     values: [
         "Austria",
         "Belgium",
         "Brazil",
         "Finland",
         "France",
         "Germany",
         "Ireland",
         "Italy",
         "Mexico",
         "Spain",
         "Sweden",
         "Switzerland",
         "UK",
         "USA",
         "Venezuela"
     ],
     labels: [
         "Austria",
         "Belgium",
         "brazil",
         "Finland",
         "france",
         "germany",
         "Ireland",
         "Italy",
         "Mexico",
         "Spain",
         "Sweden",
         "Swiss",
         "uk",
         "USA",
         "Venezuela"
     ],
     editor: {
         type: "dropdown",
         dropDownCount: 5;
         values: [
             "Brazil",
             "Germany"
         ],
         labels: [
             "brazil",
             "germany"
         ],
     },
     header: {
         text: "editor.values, labels",
         styleName: "orange-column"
     }
   },
   ...
   ```

## Controlling button visibility

Set the display method by specifying `always`, `default`, `hidden`, `rowfocused`, and `visible` in column.[editButtonVisibility](/refs/realgrid#buttonvisibility).

```js
const fields = [
  {
    fieldName: "OrderID",
    dataType: "text"
  },
  {
    fieldName: "CustomerID"
  },
  {
    fieldName: "EmployeeID"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat:"yyyy-MM-dd"
  },
  {
    fieldName: "CompanyName"
  },
  {
    fieldName: "Country"
  },
  {
    fieldName: "CountryKor"
  },
  {
    fieldName: "Phone"
  },
  {
    fieldName: "ProductName"
  },
  {
    fieldName: "QuantityPerUnit"
  },
  {
    fieldName: "Quantity",
    dataType: "number"
  },
  {
    fieldName: "UnitPrice",
    dataType: "number"
  }
];

const columns = [
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    editButtonVisibility: "always",
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "RATTC",
      "WARTH"
    ],
    labels: [
      "Vins et alcools Chevalier",
      "Hanari Carnes",
      "Suprêmes délices",
      "Victuailles en stock",
      "Rattlesnake Canyon Grocery",
      "Wartian Herkku"
    ],
    editor: {
      type: "dropdown"
    },
    header: {
      text: "always",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    editButtonVisibility: "default",
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "RATTC",
      "WARTH"
    ],
    labels: [
      "Vins et alcools Chevalier",
      "Hanari Carnes",
      "Suprêmes délices",
      "Victuailles en stock",
      "Rattlesnake Canyon Grocery",
      "Wartian Herkku"
    ],
    editor: {
      type: "dropdown"
    },
    header: {
      text: "default",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    editButtonVisibility: "hidden",
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "RATTC",
      "WARTH"
    ],
    labels: [
      "Vins et alcools Chevalier",
      "Hanari Carnes",
      "Suprêmes délices",
      "Victuailles en stock",
      "Rattlesnake Canyon Grocery",
      "Wartian Herkku"
    ],
    editor: {
      type: "dropdown"
    },
    header: {
      text: "hidden",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID4",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    editButtonVisibility: "rowfocused",
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "RATTC",
      "WARTH"
    ],
    labels: [
      "Vins et alcools Chevalier",
      "Hanari Carnes",
      "Suprêmes délices",
      "Victuailles en stock",
      "Rattlesnake Canyon Grocery",
      "Wartian Herkku"
    ],
    editor: {
      type: "dropdown"
    },
    header: {
      text: "rowfocused",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID5",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    editButtonVisibility: "visible",
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "RATTC",
      "WARTH"
    ],
    labels: [
      "Vins et alcools Chevalier",
      "Hanari Carnes",
      "Suprêmes délices",
      "Victuailles en stock",
      "Rattlesnake Canyon Grocery",
      "Wartian Herkku"
    ],
    editor: {
      type: "dropdown"
    },
    header: {
      text: "visible",
      styleName: "orange-column"
    }
  },
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "CompanyName",
    fieldName: "CompanyName",
    width: "200",
    editor: {
      type: "multiline",
      textCase: "upper"
    },
    header: {
      text: "Multiline Edit"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.##",
      multipleChar: "+"
    },
    header: {
      text: "Number Edit"
    }
  },
  {
    name: "CustomerID6",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        gridView.refresh();
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
...
//Column settings
   {
     name: "CustomerID",
     fieldName: "CustomerID",
     width: 150,
     sortable: false;
     lookupDisplay: true;
     editButtonVisibility: "always", //default, hidden, rowfocused, visible
     values: [
         "VINET",
         "HANAR",
         "SUPRD",
         "VICTE",
         "RATC",
         "WARTH"
     ],
     labels: [
         "Vins et alcools Chevalier",
         "Hanari Carnes",
         "Suprêmes délices",
         "Victuailles en stock",
         "Rattlesnake Canyon Grocery",
         "Wartian Herkku"
     ],
     editor: {
        type: "dropdown"
     },
     header: {
         text: "always",
         styleName: "orange-column"
     }
   },

...
```

## Search Editor

The search editor is an editor that displays matching values among set values in a drop-down list. When a search begins, the gridView.onEditSearch() event occurs, and after the search is processed within this event, gridView.fillEditSearchItems() is executed to fill the drop-down list.

```js
const fields = [
  {
    fieldName: "OrderID",
    dataType: "text"
  },
  {
    fieldName: "CustomerID"
  },
  {
    fieldName: "EmployeeID"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat:"yyyy-MM-dd"
  },
  {
    fieldName: "CompanyName"
  },
  {
    fieldName: "Country"
  },
  {
    fieldName: "CountryKor"
  },
  {
    fieldName: "Phone"
  },
  {
    fieldName: "ProductName"
  },
  {
    fieldName: "QuantityPerUnit"
  },
  {
    fieldName: "Quantity",
    dataType: "number"
  },
  {
    fieldName: "UnitPrice",
    dataType: "number"
  }
];

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor",
      styleName: "orange-column"
    }
  },
  {
    name: "CompanyName",
    fieldName: "CompanyName",
    width: "200",
    editor: {
      type: "multiline",
      textCase: "upper"
    },
    header: {
      text: "Multiline Edit"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.##",
      multipleChar: "+"
    },
    header: {
      text: "Number Edit"
    }
  },
  {
    name: "CustomerID4",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        gridView.refresh();
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
...
var CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU ", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO ", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN ", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH ", "WELLI", "WHITC", "WILMK", "WOLZA"];

gridView.onEditSearch = function (grid, index, text) {
     console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
     var items = CustomerNames.filter(function (str) {
         return str.indexOf(text) == 0;
     });
     console.log(items);
     grid.fillEditSearchItems(index.column, text, items);
};
...
//Column settings
{
   "name": "CustomerID3",
   "fieldName": "CustomerID",
   "width": "150",
   "sortable": false,
   "editor": {
     "type": "search",
     "searchLength": 1,
     "searchDelay": 1000;
     "useCtrlEnterKey": true,
     "useEnterKey": true
   },
   "styles": {
     "textAlignment": "center"
   },
   "header": {
     "text": "Search Editor ",
     "styles": {
         "background": "linear,#22ffd500,#ffffd500,90"
     }
   }
}
...
```
