SlickGrid select editor

Question

I want to make a dynamically populated html select for a select cell. I extract some information from a database which is different for every row item. The problem is that t

Answer 1

Please try the below code.

In slick.editors.js,Define a new editor.

$.extend(true, window, {
    "Slick": {
      "Editors": {
       "SelectOption": SelectCellEditor,
       .....
      }
    }
  });
function SelectCellEditor(args) {
    var $select;
    var defaultValue;
    var scope = this;
    var s;
    this.init = function() {
        opt_values = eval(args.column.options);
        option_str = "";
        var tuples = [];
        for (var key in opt_values) tuples.push([key, opt_values[key]]);
        tuples.sort(function(a, b) { return a[1] < b[1] ? 1 : a[1] > b[1] ? -1 : 0 });
        var length = tuples.length;
        while (length--) option_str += ""+tuples[length][1]+"";

        $select = $(""+ option_str +"");
        $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() {
          return $select.val();
    };

    this.applyValue = function(item,selectedIndex) {
        if($.isNumeric(selectedIndex))
            item[args.column.field] = parseInt(selectedIndex);
        else
            item[args.column.field] = selectedIndex;
    };

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

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

    this.init();
}

Then, modify your grid options

var grid_options = {
editable:             true,
enableAddRow:       false,
multiColumnSort:    true,
explicitInitialization: true,
 dataItemColumnValueExtractor: function(item, columnDef) {
 if(columnDef.editor == Slick.Editors.SelectOption){
    return eval(columnDef.options)[item[columnDef.field]];
  }else{
    return item[columnDef.field];
  }
}

};

And use the editor while columns initialization.

{id: "currency_id", name: "Currency *", field: "currency_id", editor: Slick.Editors.SelectOption, options: { 1: 'Dollar', 2: 'Yen', 3: 'Rupiah' }, sortable: true,width: 234}