How to place a dropdown under selected cell handson table using css or javascript

Hi @aleksandra_budnik, @adrian.szymanski

How to place a dropdown container on given selected cell onclick.

Hey @sumanthhs48

Could you share a drawing/draft of the expected UI?

hi @aleksandra_budnik @adrian.szymanski
this is the image

hi @aleksandra_budnik
in the above shows everything

Do you mean something like this, @sumanthhs48 Or you plan to open the list and show the options when user logs in / opens the page?

Hi @aleksandra_budnik
When user clicks particular cell the custom designed drop-down should open below the selected cell. Please can you help me with this.

At the moment the list opens when you click the little arrow on the right side on the cell


so as I assume you’d rather see the cell showing the option on a single cell click/cell selection?

Hi @aleksandra_budnik

This is default drop-down of handson table I am using some custom ui when we click on particular cell it should render below the selected cell

We do not have tutorials on connecting other dropdowns but surely you can use the afterOnCellMouseDown hook to trigger your dropdown. Then you can turn off the default cell editor.

Hi @aleksandra_budnik
Can you please send any example code of afterOnCellMouseDown hook please it will be more helpful.
Is there any method to get css positioning of the cell on selecting so that I can manage the position of the dropdown.

Hi @aleksandra_budnik

Here’s a demo
When you click on the first cell a new small window opens below the table and when you click anywhere else in the table it closes

hi @aleksandra_budnik
can we place that exactly below the cell when each cell is clicked

Hi @aleksandra_budnik

can we get co-ordinates or position of the cell by clicking on it.

Handsontable API won’t help with getting the coordinates of the cell on the screen. But you can use the JavaScript API of getBoundingClientRect method.


Hi @aleksandra_budnik

Can I get styles on clicking particular cell using get getBoundingClientRect is there any code example

as mentioned above this method comes from the JavaScript API. We offer support and examples only for the Handsontable.