Slickgrid - Change Editor of Single Cell, and not Entire Column

Question

Here's the scenario:

• There are a number of rows of selectable data
• One column (#1) has dropdown editor with two options

• The next column (#2) can have either a text editor, or dropdown editor - depending on the option selected in the first dropdown, see example:

  _________Column #1_________|_________Column #2_________

  1     select opt 1      |      *dropdown editor*    

  2     select opt 1      |      *dropdown editor*    

  3     select opt 1      |      *dropdown editor*    

  4     select opt 2      |      *text editor*         <--- is this possible?

  5     select opt 1      |      *dropdown editor*    

  6     select opt 1      |      *dropdown editor*    

Is it even possible to change the editor of a single cell based on the input/change of another cell? It appears as though you can't change editors on a cell level, but only on a column level.

Any help is greatly appreciated, many hours spent on this already; and haven't found a solution or even similar question. Thanks

Update

This is getting close perhaps:

var currentRowIndex = object.grid.getActiveCell().row,
    nextCellIndex = object.grid.getActiveCell().cell + 1;
object.grid.setActiveCell(currentRowIndex, nextCellIndex);
object.grid.editActiveCell(this.editors.textEditor);

But this doesn't ensure that the editor remains; for example^ a text editor. When changing the value in the first column (#1), and enabling the text editor in column #2 as above - after this edit takes place - the original editor is still in place in column #2.

I want the editor to remain the same - but can't find how to do this on a cell level rather than a column level. Thanks

Answer 1

Browsing the source (getEditor line 1381) pertaining to the retrieval of editors reveals a few different options are available.

• column metadata
• column definition
• editorFactory grid option

Given that you require a different column value from within the row, I would approach the problem using the column metadata as it receives the rowIndex as an argument.

var viewModel = {options: ['LongText', 'Text', 'Checkbox']}
 
function apply() {
    var grid, data = [];
        
    var options = {
        editable: true,
        enableCellNavigation: true,
        asyncEditorLoading: false,
        autoEdit: true,
        forcefitColumns: false
         
    };

    var columns = [{
        id: "data",
        name: "Editor Type",
        field: "type",
        width: 120,
        cssClass: "cell-title" ,
        formatter: function(row){ 
            var key = 'input'+row;
            
            if(!viewModel[key]){
              viewModel[key] = ko.observable();
              viewModel[key].subscribe(function(nv){
              
              data[row].type = nv
            })
           }
             
            setTimeout(function(){ ko.applyBindings(viewModel, document.getElementById(key))  }, 250);
            return '<select id="'+key+'", data-bind="options: options, value: '+key+'"></select>'
        }
       },
       {
        id: "other",
        name: "Other",
        field: "other",
        width: 120,
        cssClass: "cell-title",
         
    }];

    for (var i = 0; i < 5; i++) {
        var d = (data[i] = {});

        d["type"] =  "";
        d["other"] = "Default " + i;
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
    //ko.applyBindings(viewModel)

    data.getItemMetadata=function(row){
    
        var rowData = data[row]
        //console.log(rowData)
        var metaData = {columns:{other: {}}}
        metaData.columns.other.editor = Slick.Editors[rowData.type]
         
        return metaData
    }
   
}

apply()

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://JLynch7.github.io/SlickGrid/slick.grid.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="http://JLynch7.github.io/SlickGrid/slick.dataview.js"></script>
<script src='http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js'></script>
<script src='http://JLynch7.github.io/SlickGrid/slick.core.js'></script>
<script src='http://JLynch7.github.io/SlickGrid/slick.grid.js'></script>
<script src='http://JLynch7.github.io/SlickGrid/slick.formatters.js'></script>
<script src='http://JLynch7.github.io/SlickGrid/slick.editors.js'></script>

<div id='container'>
    <div id="myGrid" style="width:600px;height:300px;"></div>
</div>