Implementing drop-down at particular location of cell-grid on user click event.

[sam1186]

I have a JStree grid and I want to display drop-down on user click event based on type of cell data. I have now some understanding of creating drop-down feature using html but I want to map it with cell click event of JStree.

In below tree image I want to add drop-down in highlighted cell in 'Value' column.

Also, I have added div for drop down and able to get the drop-down menu in target cell on single click event on that particular cell but unable to hold drop-down options(i.e wait for user input) since for selecting any option I have to click on that cell again. Even I tried with 'stopImmediatePropagation()'. If anyone has implemented similar functionality or any idea about this issue then please suggest.

Below is the code snippet for reference.
$('#tableview').on('select_cell.jstree-grid',function (e,data)
{
if(enumFlag)
{
e.stopImmediatePropagation();
}
});
/this click event will execute first time when user clicks on
target cell/
$('#tableview').on('select_cell.jstree-grid',function (e,data)
{
if(data.column == "Value")
{
gridID = data.grid[0].id;
var gridData = data.grid[0].innerHTML;
var classString="";
let dataCounter;
/*Added logic here to check whether data type is enum
if data type is enum then call editEnum() and create div
for drop-down */
enumFlag = true;
editEnum();
}
});
function editEnum()
{
if(enumFlag == true)
{
$("#"+gridID+" > span").html("

");
// enumFlag = false;
var select = document.createElement("select");
select.name = "enum_dropdown";
select.id = "enum_test"
for (const val of dropDown_Data)
{
var option = document.createElement("option");
option.value = val;
option.text = val;
select.appendChild(option);
}
document.getElementById('test').appendChild(select);
}
}