CODEWITHSUNDEEP
javascriptjqueryjquery-pluginshandsontable
Dave
Dave

Reputation: 5049

HandsOnTable Dropdown with large number of rows

I ran into some strange behavior when using HandsOnTable with a dropdown consisting of many rows.

Not all the rows appear the first time the dropdown is clicked. The second time it is clicked, it works. It does the same thing for me in Chrome, IE, Safari, and Firefox.

You can see the entire code in JSFiddle.

http://jsfiddle.net/nt001ymn/15/

    $(document).ready(function () {

  function getCarData() {
    return [
      ["Nissan", 2009, "black", "black"],
      ["Nissan", 2006, "blue", "blue"],
      ["Chrysler", 2004, "yellow", "black"],
      ["Volvo", 2012, "white", "gray"]
    ];
  }

  $("#example1").handsontable({
    data: getCarData(),
    startRows: 7,
    startCols: 4,
    colHeaders: ["Car", "Year", "Chassis color", "TEST"],
    columns: [
      {},
      {type: 'numeric'},
      {
        type: 'dropdown',
        source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
      },
      {
        type: 'dropdown',
        source: ["Lots of data!", ... ...  "LAST LINE"
                ]
      }
    ]
  });


});

Edit: In the meantime I'm using Javascript to programmatically click the dropdown twice. Not really a solution but it makes the experience seamless to the user.

Upvotes: 1

Views: 1191

Answers (1)

miguelote
miguelote

Reputation: 51

I suggest to use a autocomplete type

var lotOfData = JSON.parse($('<div/>').html($('#textAreaData').val()).text());

...

    type: 'autocomplete',
    source: lotOfData
}
...

< textarea id="textAreaData" >...< textarea >

Upvotes: 1

Related Questions