Dynamic dropdown source when paste

Tags: #<Tag:0x00007efc623ed1f8>

When I copy a line that contains a dynamic dropdown source, the source is not modified and the cell becomes red. Here is an example:
https://jsfiddle.net/handsoncode/1gtu29rn/
In the first line, select 2015. Jack appears.
In the second line, select 2016. WW appears.
Copy the second line on the first line. WW appears in red, and the dropdown list is still that of 2015.

Hi @erickael

I remember this demo. That was used to share cell dependencies in one of our blog posts. Well. That was some time ago, and this demo is quite easy and supports only a case when the user alters one cell at a time - you can see this in lines 94-96, where we use the changes[0] parts of the hook result (meaning, the first changed cell). If you are planning to support multiple cell changes (like while copying a whole row) you should create a loop for all those cells.

Hi aleksandra
Thank you for your answer. I know that your demo was not intended to manage copy paste. My goal was to easily show what happens. I can’t avoid the problem. Of course, I make a loop to process all the changes. I tried modifying the list in beforeChange and in beforePaste. But the dropdown validation always run before the list is updated. How to do ?

Ok, so beforeChange runs before beforeValidate so I think that we will be able to adjust the demo. Just to confirm, cause I assume your data looks a bit more different, do you want to block the paste action for the 3rd column as a cell that depends on the 2nd column’s value or the general plan is different?

I don’t have to block the paste in the dropdowns. Users should be able to copy paste an entire row.

I coded a simplified version of my program in fiddle.
https://jsfiddle.net/7513ytef/21/

The company dropdown depends on the data type. The application dropdown depends on the data type and the company. The product dropdown depends on the company and the application.

  • select a data type. The list of companies becomes selectable
  • select a company. The list of applications becomes selectable.
  • select an application. The list of products becomes selectable.
  • select a product.
  • copy the 1st row, paste in the second row. The list of applications turns red. But strangely, the product dropdown remains ok.

I noticed that the copy-paste works if I copy to a blank line with “insert row”.

  • insert a row
  • paste the first line in the new one. All dropdowns are ok.

Hi @erickael

Thank you for sharing the details. The dropdown source is changed after validation checks if the value (empty string) is in the array of choices (which is empty at that moment). So what I can offer is

  • after the validation to be skipped if a cell is dropdown type and it has an empty array as a source, or
  • keep cells without the list of choices as text and switch to dropdown cell type when they are given the list of choices

Thank you. I managed to make my demo work with the 1st solution.
https://jsfiddle.net/1fcaze3x/2/
I will use this technique for my project.

I had first tried with the 2nd solution, but the type of the cell did not change.
https://jsfiddle.net/xbsfgn1k/6/

Hi @erickael

I’ve created the 2nd scenario from scratch cause I did not want to remove too much of your logic. You can test it here https://jsfiddle.net/9fy27j8u/. I’ve added a predefined value for cells in the first column of the second’s grid, but it’s easy to change if you do not want that.

Thank you aleksandra. I tried to report in my scenario the differences with yours (afterChange instead of beforeChange, render(), modification of the source before modifying the type), but the type of the cells is still not modified. Never mind. In my project, I used the other technique, with beforeValidate, and it works. So you can close. If, in the future, I need to use the type change technique, I’ll open a new question.

Thank you for your feedback and the investigation that we could perform together, @erickael