Slickgrid, column with a drop down select list?

Question

Hi I was wondering if anyone knows if it's possible to define a column in slickgrid as being a drop down select list. If not does anyone with some experience with slickgrid know how I should go about adding this option?

Thanks

Solution 1

I assume you mean a custom cell editor. Here's a sample select-based boolean cell editor from slick.editors.js. You could easily modify it to work with an arbitrary set of possible values.

function YesNoSelectCellEditor($container, columnDef, value, dataContext) {
    var $select;
    var defaultValue = value;
    var scope = this;

    this.init = function() {
        $select = $("<SELECT tabIndex='0' class='editor-yesno'><OPTION value='yes'>Yes</OPTION><OPTION value='no'>No</OPTION></SELECT>");

        if (defaultValue)
            $select.val('yes');
        else
            $select.val('no');

        $select.appendTo($container);

        $select.focus();
    };


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


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

    this.setValue = function(value) {
        $select.val(value);
        defaultValue = value;
    };

    this.getValue = function() {
        return ($select.val() == 'yes');
    };

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

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

    this.init();
};

Solution 2

You probably dont want to make a new select editor for each range of options. Also you may not know that range of all option value beforehand.

In that case you want a flexible range of options in a select type editor. In order to do this you can add an extra option to your column definitions (e.g. called options) like this:

 var columns = [
  {id:"color", name:"Color", field:"color",  options: "Red,Green,Blue,Black,White", editor: SelectCellEditor},
  {id:"lock", name:"Lock", field:"lock",  options: "Locked,Unlocked", editor: SelectCellEditor}
 ]

and access that using args.column.options in the init method of your own SelectEditor object like this:

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

        this.init = function() {

            if(args.column.options){
              opt_values = args.column.options.split(',');
            }else{
              opt_values ="yes,no".split(',');
            }
            option_str = ""
            for( i in opt_values ){
              v = opt_values[i];
              option_str += "<OPTION value='"+v+"'>"+v+"</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();
            }else{
              return ($select.val() == "yes");
            }
        };

        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();
    }

Comments

[Sam]

Thanks that's the sort of thing I was looking for, guess I'll have to modify it and try and add some parameter to the columns so you can change the columns at on the fly. Similar to what jqGrid has for select lists atm.

[madth3]

Great! Not only did I use your idea for adding a select but the example was also useful to understand better how to pass arguments to the editors.

[Vivek Vardhan]

@Matthijs Is it possible to add dynamic options? i.e Suppose i have two dropdowns in grid as editor, based on selection in first, i want the possoble options in second dropdown. Is it possible?

[Simon H]

@VivekVardhan - yes, pass in a function which returns the set of values

[Peru]

@Matthijs Is it possible to have dynamic drop down for each row. For example i need to dynamically load drop down based on id. and each row drop down will have different options how do i achieve that ?

[Geo V L]

@Matthijs Can we improve options with Key Value Pair[{"1":"Red","2":"Green"}] for saving data. Need to get value of options on saving json but need to display text on grid.Because in all doropdowns we have a master list which saved somewhere