Slick Grid SelectBox with inline Edit which displays Text after Selecting values

Question

I am trying to represent data with slick Grid. But in my case most of data comes in a form of selectboxes. I check the options on SelectCellEditor Option from here. But for dynamic populated values at the time of saving it will be helpful if we can use post data using value and display the text in grid. For this i modified my data as below

function SelectCellEditor(args) {
    var $select;
    var defaultValue;
    var scope = this;

    this.init = function() {

        option_str = "";
        args.column.options.forEach(function(data)
        {
          option_str += "<OPTION value='"+data.key+"'>"+data.value+"</OPTION>";
        });
        $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>");
        $select.appendTo(args.container);
        $select.focus();
    };

    this.destroy = function() {
        $select.remove();
    };

    this.focus = function() {
        $select.focus();
    };

    this.loadValue = function(item) {

        defaultValue = item[args.column.field];
        $select.val(defaultValue);
    };

    this.serializeValue = function() {
        if(args.column.options){
          return $select.val();
        }
    };

    this.applyValue = function(item,state) {
        item[args.column.field] = state;
    };

    this.isValueChanged = function() {
        return ($select.val() != defaultValue);
    };

    this.validate = function() {
        return {
            valid: true,
            msg: null
        };
    };

    this.init();
}

But here my problem is I can't load text value on inital load and after selecting a value from dropdown cell replace with value instead of select text . In this example i have generated data as in the below format

var data =[{"key":"1","value":"Item1"},{"key":"2","value":"item2"}];

Answer 1

You should also add formatter on your column definition. e.g.

{id:'id',name:'thename',...,options:data, editor:  SelectCellEditor,formatter:SelectCellFormatter}

where SelectCellFormatter:

    SelectCellFormatter: function(row,cell,value,columnDef, dataContext){
        // filter options based on key value
        var ret = columnDef.options.filter(function(a){return a.key==value})
        // return the value
        if(ret.length>0){
            return ret[0].value;
        } else {
            return null;
        }

    }