A simple SlickGrid DropDown select list celleditor

Question

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.

Answer 1

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
    }
]