Handsontable dropdown source from column property

Question

Can't find the solution, so maybe someone will help.

I have a set of data similar to this:

    [
        {
        id: 1,
        name: 'Nissan',
        year: 2012,
        chassis_color: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
      },
      {
        id: 2,
        name: 'Chrysler',
        year: 2014,
        chassis_color: ['red', 'orange', 'blue', 'gray', 'black', 'white']
      },
      {
        id: 3,
        name: 'Volvo',
        year: 2015,
        chassis_color: ['white', 'orange', 'blue', 'red']
      }
    ]

So I can't figure out how to populate chassis_color column dropdown from it's value not by manually entering the array value.

The example in documentation:

columns: [
      {
        type: 'dropdown',
        source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
      }
]

But I need this:

columns: [
          {
            type: 'dropdown',
            source: 'chassis_color' // it should understand that this property is an array and populate source with it
          }
]

to work the same way.

I need this, because I have very big set of data and it will be hard to set something manually.

Thanks.

Answer 1

Handsontable just try to display your arrays as a data.

You can use the cell property to change source value :

cells: function(row, col, prop) {
    var cellProperties = this;

    if (col == 0) {
        cellProperties.type = 'dropdown';
        var val = data[row].chassis_color_source;

        if (typeof val != 'undefined') {
            cellProperties.source = val;
        }
    }

    return cellProperties;
}

Full example in this JSFiddle.