Dropdown menu with json data

Tags: #<Tag:0x00007efc64ac8368>
#1
  1. Is there a way to use dropdown(select) with json?
    I just set like below:

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

then whole cells are empty…

  1. Can I add event like ‘onchange’ to the dropdown menu?

Thanks.

How to Use SQL Server Json as Dropdown Source
#2

Hi @gim.jaejeong

the dropdown cell type has to be passed with an array of options. You can still use .json but you need to parse it.
When it comes to dropdown menu there’s no option to send a notification when it has been closed and any of the options have been chosen. But if you could share a sample scenario I am sure that we can think about a solution.

#3

hi, thanks for reply.

It works when I don’t use “columns”…

xhttp = new XMLHttpRequest();
xhttp.open(“GET”, url, true);
xhttp.send();
xhttp.onreadystatechange = function() {
if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
var result = JSON.parse(xhttp.responseText);

result = [{key:“value”, key:"value, key:“value”…}, {key:“value”, key:"value, key:“value”…}, {key:“value”, key:"value, key:“value”…}…]

var hot = new Handsontable(table, {
data: result,
stretchH: ‘all’,
rowHeaders: true,
colHeaders: arr,
columnSorting: true,
manualColumnResize: true,
fixedColumnsLeft: 2,
search: true,
columns: [
{},
{
type: ‘dropdown’,
source: [‘yellow’, ‘red’, ‘orange’, ‘green’, ‘blue’, ‘gray’, ‘black’, ‘white’]
},
{},{},{},{},{},{},{},{},{},{},{},{},{}
],
cells: function(row, col, prop) {
var cellProperties = {};
//if (col === 1) {
// cellProperties.type = “dropdown”;
// cellProperties.source = [‘yellow’, ‘red’, ‘orange’, ‘green’, ‘blue’, ‘gray’, ‘black’, ‘white’];
// }
cellProperties.renderer = btnRenderer;
cellProperties.readOnly = true;
return cellProperties;
}
});

How can I do?

#4

Can you send me a live demo (JSBin/JSFiddle/CodePen)?

#5

Hi @gim.jaejeong

Have you managed to fix this issue? There’s more than a week without any update.

#6

Thank you for care :slight_smile:

But I’m not still find a way…

Can’t I use dropdown with data type this [{},{},{}...]?

https://docs.handsontable.com/0.16.1/demo-dropdown.html
This is yours about ‘dropdown’.

If you change data like below,
[
{“a”:“Nissan”, “b”:2012, “c”:“black”, “d”:“black”},
{“a”:“Nissan”, “b”:2013, “c”:“blue”, “d”:“blue”},
{“a”:“Chrysler”, “b”:2014, “c”:“yellow”, “d”:“black”},
{“a”:“Volvo”, “b”:2015, “c”:“white”, “d”:“gray”}
]
there will be no data, first column and second column.
(Especially on my table, Every Column is empty… even dropdown columns…)

#7

Not yet. Currently, we can only use an array or single strings or numbers. We have planned to add key/value dropdowns. However, did not manage to find time to investigate it closer.

#8

Thanks.
I hope that will come soon.

#9