Handsontable: Adding drop down values dynamically

Question

I am adding a drop down to all columns of the first row using the following code.

var hot = new Handsontable(container,
    {
        data: results,
        colWidths: [200, 200, 200, 200, 200, 200, 200, 200, 200],
        colHeaders: false,
        contextMenu: true,
        cells : function (row, col, prop) {
            if (row === 0) {
              this.type = 'dropdown';
              var val = this.instance.getValue();
              if(typeof val != 'undefined') {
                this.source = [val, 'Code', 'Type', 'Color'];
              }
            }
        }
    });

In my cells function I am trying to add the current cell value to the drop down (default values are Code, Type and Color). But if the user decided to enter in "Weight" in the cell, then I would want the drop down to contain ("Weight", "Code", "Type" and "Color").

The function above did do this but not correctly... The value that was added got replaced by the next every time the function was called.

I then tried creating a list which I would add the value val to and setting source to that list.

But I can't help but feeling that there is a better way to do this.

Any pointers would be appreciated!

Answer 1

I see, from what your comment says, you seem to want to APPEND values to your source list. Therefore, I would suggest the following:

var hot = new Handsontable(container,
    {
    data: results,
    colWidths: [200, 200, 200, 200, 200, 200, 200, 200, 200],
    colHeaders: false,
    contextMenu: true,
    cells : function (row, col, prop) {
        if (row === 0) {
          this.type = 'dropdown';
          var val = this.instance.getValue();
          if(typeof val != 'undefined') {
            this.source.push(val); // to add to the beginning do this.source.unshift(val) instead
          }
        }
    }
});

What this does is append the current value to the source list. This way, the next time you enter a value, it will get appended rather than replaced.

Answer 2

<select ng-repeat="myModel">
 <option value=1>First Selection</option>
 <option value=2>Second Selection</option>
</select>