How to load data only on few columns in handsontable on change in the value of a dropdown in a cell?

Question

I have a handsontable with few columns.Where one of the columns has dropdown values. On change of the dropdown value I want to load the next two columns based on dropdown selection. I will get a JSON array data for selected dropdown value. How can I push the JSON array data for those two columns?

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [
      ["Nissan", 2012, "black"],
      ["Nissan", 2013, "blue"],
      ["Chrysler", 2014, "yellow"],
      ["Volvo", 2015, "white"]
    ];
  }

  var
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: getCarData(),
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color',"Body Colour"],
    columns: [
      {},
      {type: 'numeric'},
      {
        type: 'dropdown',
        source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
      },
      {
        type: 'text'

      },
       {
        type: 'text'

      }
    ]
  });

  function bindDumpButton() {
      if (typeof Handsontable === "undefined") {
        return;
      }

      Handsontable.Dom.addEvent(document.body, 'click', function (e) {

        var element = e.target || e.srcElement;

        if (element.nodeName == "BUTTON" && element.name == 'dump') {
          var name = element.getAttribute('data-dump');
          var instance = element.getAttribute('data-instance');
          var hot = window[instance];
          console.log('data of ' + name, hot.getData());
        }
      });
    }
  bindDumpButton();

});

Here is the JSfiddle link

http://jsfiddle.net/6dzrpdzu/2/

Answer 1

I think you are looking for attaching afterchange event to your `handsontable to grab the dropdown selection event. Please have a look at updated fiddle:

http://jsfiddle.net/6dzrpdzu/5/

hot = new Handsontable(container, {
    data: getCarData(),
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color',"Body Colour"],
    columns: [
      {},
      {type: 'numeric'},
      {
        type: 'dropdown',
        source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
      },
      {
        type: 'text'

      },
       {
        type: 'text'

      }
    ],
    afterChange: onChange
  });

function onChange(changes, source) {
        if (!changes) {
            return;
        }
        var instance = this;
        var row = -1;
        var col = -1;
        var newValue = "";
        changes.forEach(function (change) {
            row = change[0];
            col = change[1];
            newValue = change[3];
        });
        if(col == 2){
            instance.setDataAtCell(row, col+1, getCarData()[row][2]);
          instance.setDataAtCell(row, col+2, getCarData()[row][2]);
         }

  }