Load array in Handsontable cell

Question

While changing the values in one cell I have to load array of values (as drop down) in other cell.

I don't know how to load array in cell.

What I tried is:

afterChange: function(changes, source) {
        if(!changes) {
        return;
      }
      $.each(changes, function(index, element) {
       var row = element[0];
       var col = element[1];
       var oldVal = element[2];
       var newVal = element[3];
       if(col==6) {
         tsContainer.setDataAtCell(row, 1, pjtArray);    
       }
      });
    }

Here I used setDataAtCell method, It loads the array as string(comma separated).

And I tried

     var arr = [['123'],['dfg'],['678'],['asd']];
     tsContainer.populateFromArray(row, 1, arr);

But it load the array each element in each cell.

I have to display all element in one cell as dropdown.

In handsontbale column property we can set array as source . I need something like that.

Since the data is dynamically loaded I have to write this in afterChange event.

Please help me..

Answer 1

Your guess was correct, you need to change the property source of the column to modify the dropdown values.

Let's take the following initial data set :

myData = [
    ['source1', 'option1'],
    ['source1', 'option3'],
    ['source2', 'option5'],
    ['source2', 'option7']
],

As well as the following dropdown values :

selectSource = ['source1','source2'],
source1 = ['option1','option2','option3','option4'],
source2 = ['option5','option6','option7','option8'],

And let's say you want to modify the dropdown values of column 2 depending on the value of column 1. (If column 1 equal to 'source1', the dropdown values of column 2 will be the array source1, if it's equal 'source2', source of column 2 will be the array source2) :

1. Get the properties of the cell with getCellMeta(row,column)
2. Access the source and change it for your new array

Parameter row is the current row where you triggered the event afterChange, value is the value of column 1 for this row:

function setDropDownSource(row, value) {
    var instance = this;
    var cellPropertiesOption = instance.getCellMeta(row,1); // Column 1 is your 2nd column
    if (value == 'source1')
        cellPropertiesOption.source = source1;
    else if (value == 'source2')
        cellPropertiesOption.source = source2;
    else
        cellPropertiesOption.source = null;
}

This function is called in the afterChange event as follow :

$.each(changes, function (index, element) {
    var rowIndex = element[0];
    var columnIndex = element[1];
    var newValue = element[3];

    if (columnIndex == 0) { // Checking if the event has been triggered within the column SourceSelector
        setDropDownSource.call(instance, rowIndex, newValue);
        instance.render();
    }
});

I also add an afterLoadData event to set the source for each rows of the 2nd column when loading the page. But I also wanted to empty the current value of a cell when the source is changed. So you will find an additional parameter for the function to set the condition if the cell needs to be empty or not when changing the source :

if (!init)
    instance.setDataAtCell(row,1,"");

You can find the full working example in this JSFiddle .