A simple SlickGrid DropDown select list celleditor
coffeescript, slickgrid
Solution
A Simple SlickGrid SelectCellEditor in CoffeeScript
class SelectCellEditor
last=undefined
constructor:(@args) ->
options = @args.column.options.split(",")
@select=$("<select/>")
.append("<option value=\"#{o}\">#{o}</option>" for o in options)
.appendTo(@args.container)
.focus()
loadValue: (item) ->
last = item[@args.column.field]
@select.val last
serializeValue : -> @select.val()
destroy : -> @select.remove()
focus : -> @select.focus()
isValueChanged : -> @select.val() isnt last
validate : -> {valid: true, msg: null}
applyValue : (item, state) -> item[@args.column.field] = state
Usage
Using the slickgrid `columns` definition, the `SelectCellEditor` is applied via the `editor` attribute with the list of select items supplied using an `options` attribute, as shown below:
columns = [
// Other slickgrid columns ...
{
id : "colour",
name : "Colour",
field : "Colour",
options : "Red,Green,Blue",
editor : SelectCellEditor
}
]
Problem
I want the simplest possible solution for editing a value in a slickgrid using a standard html select list. There are lots of answers here on stackoverflow all of which tell you to implement your own `SelectCellEditor`. Here are some examples: - Slickgrid, column with a drop down select list? - SlickGrid select editor - slickgrid custom dropdown editor But these examples are all in javascript and are therefore a little verbose. So I am going to answer my own question with a stripped-down CoffeeScript version. It works fine for simple select lists and is easy to extend when you want to get fancy.