Handsontable columns attribute prevents data display

Question

As per the documentation here, am trying to add a dropdown in my table.

The following code works fine without the columns attribute..

function getData(obj){
  $('body')
    .append('<div id="Hot" class="hot handsontable htColumnHeaders"></div>');
  var container = document.getElementById('Hot'),hot;
  hot2 = new Handsontable(container, {
    data:[{
          "_____DELETE_____" :"No"
           ,"CMPCODE" :"H54"
           ,"CODE" :"666"
           ,"IFRS_HIERARCHY" :"Goodwill"
         }]
    ,colHeaders: ["_____DELETE_____","CMPCODE","CODE","IFRS_Hierarchy"]
    /* the line below prevents data being displayed */
    ,columns: [{type: 'dropdown',source: ['No','Yes']},{},{},{}]
  });
};

It's not the null values either ({}) as it doesn't work purely for the _____DELETE_____ column.

I must be missing something obvious, but can't see it! I'm using v0.20.1 of the .js / .css files.

EDIT - created a fiddle: http://jsfiddle.net/rawfocus/22ubvxaa/

Answer 1

Cracked it.. Each element needs a reference to the actual column it refers to, eg as follows:

  var container = document.getElementById('example1'),hot;
  hot2 = new Handsontable(container, {
    data:[{
          "_____DELETE_____" :"No"
           ,"CMPCODE" :"H54"
           ,"CODE" :"666"
           ,"IFRS_HIERARCHY" :"Goodwill"
         }]
    ,colHeaders: ["_____DELETE_____","CMPCODE","CODE","IFRS_Hierarchy"]
    /* the line below is working now :-)  */
    ,columns: [
        {data:"_____DELETE_____"
             ,type:'dropdown',source: ["No",'Yes']}
         ,{data:"CMPCODE"}
         ,{data:"CODE"}
         ,{data:"IFRS_HIERARCHY"}
    ]
  });

Fiddle: http://jsfiddle.net/rawfocus/22ubvxaa/2/