Search code examples
javascriptjqueryslickgridtablecolumn

Slickgrid, column with a drop down select list?


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

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