Dropdown based on another value from cell

Tags: #<Tag:0x00007f8b2201c610>
#1

I am implementing the following - https://handsontable.com/docs/8.4.0/demo-dropdown.html

In this the setting is
{
type: ‘dropdown’,
source: [‘yellow’, ‘red’, ‘orange’, ‘green’, ‘blue’, ‘gray’, ‘black’, ‘white’]
},

My use case requires dropdown values based on values available in another cell.

For eg:
dropdown1: [“year”, “week”, “months”]
dropdown2: should display values selected from a cell which has values from dropdown1. If year is selected in cell1, the cell2 should display list of years.

#2

Hi @kishoranand.raj

Here is a great article on how to set up cell dependencies https://handsontable.com/blog/articles/2016/4/expand-your-app-with-cell-dependencies
I especially recommend reading the Select-dependent cells paragraph as there’s an example of how to set up those dropdowns.

#3

Hi @aleksandra_budnik,

Thank you. This is a good example of how you set single value for a dependent cell.

Our use case is setting dropdown values for a cell dependent on another cell. Assume cell1 has “state” and cell 2 has “city”. If a user selects a particular state from cell1, the corresponding cities to be available for selection in cell2.

#4

Here https://jsfiddle.net/handsoncode/fv1256n3 I have an example that works the same.

For different Year of production, we get a different list of choices for Owner in the last column.

#5

Hi @aleksandra_budnik,

Thanks. I see that by default we have the Owner column with 4 values. And when we make a change to the Year of Production, the Owner cell dropdown values get corresponding ones.

In our case, the user may or may not modify the “Year of Production”. They would directly double click the “Owner” and it has to have values for the relevant “Year of Production”.

image
image.png762×470 37 KB

#6

Then you can use a similar logic (additionally) on the initialization. Here is an example https://jsfiddle.net/ef0Lyob4/3/ I’m using the addHookOnce to trigger the attachment of source once (if you use the logic from the last demo you are already covered with the changes made by users).

1 Like
#7

Hi @aleksandra_budnik, Thank you very much. This will definitely help. Will try it and let you know.

#8

I’m glad to hear that. Let me know if you’d need anything more than that.

1 Like
#9

Hi @aleksandra_budnik, I tried using the beforeChange hook as a setting. Also included afterChange hook. And both of them are triggered only after we exit the cell. Can you please check the below sample from codesandbox.

Try double clicking into a cell for Edit. I was expecting the beforeChange hook to get called. But it doesn’t. It gets called only after I move on to another cell. Am I missing something?

#10

Yes, the change is considered an action made after the editor is closed.

If you want to perform an action when the editor is being opened, you can use the afterBeginEditing hook. Here https://codesandbox.io/s/object-data-source-forked-3m75h?file=/src/index.js:1925-1942 is the updated demo

#11

Hi @aleksandra_budnik, Ok. I will try this out and let you know. Thank you.

#12

Hi @aleksandra_budnik,

Awesome :slight_smile: . The afterBeginEditing solved our problem. Did 3 things in this hook:

  1. getDataAtCell(row, col - 1) - got the prev cell contents of the same row
  2. get the dropdown values based on prev cell value
  3. setCellMeta(row, col, “source”, dropdownValues) - set the dropdown values to the current cell

Thank you. Please close this topic.

#13

Great! I’m happy I could help :slight_smile:

Feel free to open a new ticket or contact me directly at support@handsontable.com with any new questions.

1 Like
#14