Handsontable cell type as a dropdown ID selection

[Arief Debyatman]

My requirement is as follows:

==================================================

Database structures:

==================================================

Main table structure:

- Car ID (numeric)

- Car Price (numeric)

Car ID (numeric) refers to another table (Car List table) with structure:

- Car ID (numeric)

- Car Name (text)

- Car Description (text)

==================================================

User interface (handsontable):

==================================================

Main table:

- Car Name (handsontable cell type)

- Car Price (numeric)

Car Name (handsontable cell type dropdown table):

- Car Name (text)

- Car Description (text)

==================================================

Challenges:

==================================================

1. How to automatically set the related Car ID into database since we only have Car Name in the handsontable?

    If we need to set the hidden Car ID column in the handsontable fot this purpose, how to set it since we are not displaying it in the handsontable?

2. When we are displaying the dropdown table (for handsontable cell type), the selection is becoming a cell-wise instead of row-wise.

    In this case, I can click a Car Description and the description will go to the parent/main table instead of the related Car Name.

    This will mislead the main table editing. So, can we make it to be a row-wise selection?

Cheers,

Arief

[codename-]

Q1: You can add hidden columns to Handsontable. For more information look here: http://handsontable.com/demo/datasources.html#array-hidden
Q2: I don't understand. Can you add some images or demo for this?

[Arief Debyatman]

Q2: see the above illustration I captured from http://handsontable.com/demo/handsontable.html
We can click on "Parent Company" and it will be set into the "Car" column. This should not be happened cause we need only car name (Marque) to be filled to the Car column. See that I can set Bayerische Motoren Werke AG to fill the Car column.

Regards,

Arief

[codename-]

I think that you need write your own editor for that. This can be based on original one. You need change this line, I think...

    afterOnCellMouseDown: function () {
      var sel = this.getSelected();
      parent.TEXTAREA.value = this.getDataAtCell(sel[0], sel[1]);
      parent.instance.destroyEditor();
    },

In more details: you need change sel[1] for 0 in this call this.getDataAtCell(sel[0], sel[1]);

[codename-]

Oh! Now I see that this expression is also called when user hi enter key. You need change it also in this line:

    beforeOnKeyDown: function (event) {
      switch (event.keyCode) {
        case 27: //esc
          parent.instance.destroyEditor(true);
          break;

        case 13: //enter

          var sel = this.getSelected();
          parent.TEXTAREA.value = this.getDataAtCell(sel[0], sel[1]);
          parent.instance.destroyEditor();

          break;

[Arief Debyatman]

I tried to change, but now I cannot click any of the columns.

Can you see and review this: http://jsfiddle.net/ardby/G5rJh/

Thanks a lot!

[Arief Debyatman]

OK, finally I get it works!

Please take a look at http://jsfiddle.net/ardby/G5rJh/1/
Thanks for your help!

Any suggestions for more elegant code are welcome.

Arief

[codename-]

This could be more elegant:

                    var prn = $('#example1').handsontable('getInstance')

You could close this in global variable or in closure. And this is not working when I use my keyboard to navigate over second table. For example: I can set Japan as a car using arrows and hitting enter key.