Dropdown editor
Dropdown Editor 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.
...
//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.
...
//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.
...
//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.
...
//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.
...
//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.
...
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"
}
}
}
...