List cell editor displays the selectable values in the dropdown list in advance, and enables to select one of them or use them as reference values for input. In SMART datagrid module, there are two kinds of list editors such as ListCellEditor and SearchCellEditor.
Since the list editors inherit TextCellEditor, you can use the properties of TextCellEditor like maxLength. Please refer to Text Editors example.
In order to use ListCellEditor as an editor, the type should be specified as "list" in column editor. And, the items to be displayed in dropdown list of the editor, should be specified through values property in advance.
{
"fieldName": "country",
"editor": {
"type": "list",
"values": ["Albania", "Chile", "Colombia", "Denmark", "Finland", "France"]
}
}
If input texts or click the button on the right side of the cell in the editor, the list will be displayed. At this point, if ListCellEditor.domainOnly is true, the user should select one of the list items and ignore the values not in them. It can be checked in DomainOnly column below. And, if the items have been set in lookupValues of the column rather than "values" of the editor, these values will be displayed in the list.
{
"fieldName": "country",
"lookupValues": ["Albania", "Chile", "Colombia", "Denmark", "Finland", "France"]
"editor": {
"type": "list",
"domainOnly": true
}
}
If set the same number of items as values in labels of the editor or lookupLabels of the column, you can display another values instead of the actual ones in the list. And, if specify lookupDisplay of the column as true and specify lookupValues and lookupLabels, a label instead of the value will be displayed in the data cell as well as the editor.
{
"lookupDisplay": true,
"lookupLabels": ["in", "out"],
"lookupValues": ["Import", "Export"],
"editor": {
"type": "list",
"domainOnly": true
}
}
Case sensitive when lookup in "List" column.
Search in "List" column even if a matching string is in the middle.
The type of SearchCellEditor is specified as "search". The basic function is the same as ListCellEditor. It is an editor in which has added the function to dynamically change the list item by firing an event in a specified time according to the user input.
In the grid below, "Country" column has been set by search editor. After searchDelay milliseconds from typing the text over keyLength length, GridBase.onEditSearch event will be fired. You can use GridBase.fillEditSearchItems method within the event handler to update the items in the list.
var countries = [
"Algeria", "Argentina", "Australia", "Austria",
...
];
grid.onEditSearch = function (grid, index, key) {
key = key.toLowerCase();
var items = countries.filter(function (s) {
return s.toLowerCase().indexOf(key) == 0;
});
grid.fillEditSearchItems(index.column, key, items);
}
When set SearchCellEditor.requestWhenCtrlEnter or requestWhenEnter property and type ctrl+enter or enter key, you can enable to fire an event again regardless of keyLength or searchDelay. ctrl+enter settings take precedence.