Customize the dropdown source values

Tags: #<Tag:0x00007efc651dd8d8>
#1

Is it possible to pass the key & value into the dropdown?

Sample code

hot = new Handsontable(container, {
data: getCarData(),
colHeaders: [‘Car’, ‘Year’, ‘Chassis color’],
columns: [
{},
{type: ‘numeric’},
{
type: ‘dropdown’,
source: [10 =>‘yellow’, 20=>‘red’, 30=>‘orange’]
}
]
});

The colors need to display in the dropdown. when I select the ‘red’ color from dropdown then its corresponding key as ‘20’ need to get for save.

Custom formatting for dropdown source
#2

Hi @kiruba

we currently do not support key-value dropdowns, however, you still can send the value 20 when user picked red via afterChange callback. Here is a similar example http://jsfiddle.net/handsoncode/ed5hbL8L/

#3

Thanks @aleksandra_budnik. But its a dynamic values having 50 records in my database cannot able to check with conditions.

#4

I understand. So I think that we do not have any option that can meet your requirements at this time.

#5

Assuming you mean that you do not want to have to write 50 separate “if” statements as in @aleksandra_budnik’s JSFiddle, it’s really not hard to factor the code neatly to make it handle lots of cases. For example:

var colors = {
    yellow: 10,
    red: 20,
    orange: 30,
    ...
};
var color = changes[0][3];
output.innerHTML = colors[color];

That’s it! And if your color names/values or whatever are in a database you can just look it up there instead of needing the literal “colors” values enumeration.

So, for example, let’s assume you have database rows which have a name column for the color names and a value column for the corresponding number-value. Then instead of hard-coding you can dynamically create the colors object I’m using with something like:

var colors = {};
foreach row in data-table do
    colors[ row[name] ] = row[value];
end

And furthermore, to get the array of color names you need to pass as source: to the Handsontable constructor, you can just use Object.keys(colors).

Of course, assuming you will do this population at Handsontable creation-time, you will need to use colors as a “global variable” so that it is preserved for use later in the afterChange callback. You could save it as a (user-defined/extra) property on your Handsontable instance so that it is easily accessible in the right place.

1 Like
#6

Thanks Jon, but need to create two type of array, one for pass the value into the dropdown and another one for after selected from dropdown get the value.

In google search got this URL https://github.com/trebuchetty/Handsontable-select2-editor, they used the custom renderer. Passed the input to dropdown like,

var optionsList = [{id: 1, text: ‘first’}, {id: 2, text: ‘second’},{id: 3, text: ‘Third’}, {id: 4, text: ‘Forth’},{id: 5, text: ‘Fith’}];

If selected the dropdown value ‘Third’ then will get the corresponding ID value.

#7

@kiruba
I know you need a pair of values, one for the what appears in the dropdown (output) and another for what is returned (input). In my solution, the colors object is in effect an array indexed by color name (output, text in your example) whose value is the number (input, id in your example). Or you could swap them around.

I have not used a custom renderer in Hot, preferring to use the inbuilt facilities. But if the solution you have found works for you that is great.

#8