You can specify the styles of the items which are displayed in the dropdown list box in ListCellEditor.listItemStyles.
var columns = [{
"name": "Country",
"editor": {
"type": "list",
"listItemStyles": {
"selectedBackground": "#008",
"selectedColor": "#ff0",
"hoveredColor": "#f00",
"hoveredBackground": "#10000000"
}
}
},
...
If use ListCellEditor.itemsCallback, you can dynamically configure the list items during the run time. In the example below, it configures the items of the list editor in "Product code" column differently according to the value of "Flow" column.
var columns = [{
name: "CommCode",
editor: {
type: "list",
itemsCallback: function (index) {
var items = { values: [], labels: [] }
if (index.getRow().getValue('flow') == 'Import') {
items.values.push('500001', '500002', '500003', '500004', '500005');
items.labels.push('import 1', 'import 2', 'import 3', 'import 4', 'import 5');
} else {
items.values.push('900001', '900002', '900003', '900004', '900005');
items.labels.push('export 1', 'export 2', 'export 3', 'export 4', 'export 5');
}
return items;
}
}
},
...
You can also use LookupTree to configure the list of the list editor. Besides providing the list, LookupTree enables to display the looked-up value rather than the actual one in the data cell. If it is the case that can configure standard Keys/Value set, LookupTable is recommended.