Dropdown option for single click

[ghost]

It is only possible to open the dropdown list with a double-click. We would like to have the option to also click it open with a single mouse click.

[pphod]

There is not possible natively since will cause problems with the normal seletion in the table. But you can use an event such as onselection to perform actions and open the editor.

[suchinramteke]

Can you please suggest me how to open an editor ?

[alatabc]

i'm also curious about this. when assigning the command for opening an editor for onselection, the dropdown entries appear on leftclick, but also disappear as soon as mouseup-event occurs

[pphod]

You can try to create a promise or a simple setTimeout to start the edition after the mouseup.

[Shnoulle]

A hack workaround for this … not the best and surely can be improved

The idea :

1. Add an element inside dropdown cell
2. When click on this element : open current dropdown cell

I use onload + onchange event to launch this function, using jquery

Adding element :

        $(element).find("table tbody").find("td.dropdown").each(function(){
            if(!$(this).find(".dropdown-open").length) {
                $(this).prepend("<i class='dropdown-open' aria-hidden='true'></i>");
            }
        });

Action on click

        $(element).on('click', 'td.dropdown .dropdown-open',function() {
            var columnId = $(this).parent(".dropdown").data("x");
            var rowId = $(this).parent(".dropdown").data("y");
            instance.openEditor(instance.records[rowId][columnId], true);
        });

And the css (with fontawesome 4)

.jexcel > tbody > tr > td.dropdown {
  background-image: none;
}
.jexcel > tbody > tr > td.dropdown .dropdown-open {
  display: block;
  position:absolute;
  right:-5px;
  top:0;
  z-index:1;
  height:28px;
  width:28px;
  padding : 0.5em;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: top 50% right 5px;
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='lightgray'/%3E%3C/svg%3E");

It's really a workaround, i see jexcel 2 have an extra element for the clcik, this allow to open with one click.

[alatabc]

i'm amazed, thank you very much

[Shnoulle]

HI,did you solve this problem?

Did you read the comments ?

[whyJoe]

I find a new solution.

I use onselection event to launch it.

x is the column positioning for the drop-down box.

onselection: function (instance, x1, y1, x2, y2, origin) {
            if (x1 == 2) {
                var columnName = jexcel.getColumnNameFromId([x1, y1]);
                var cell = instance.jexcel.getCell(columnName);
                instance.jexcel.openEditor(cell);
                cell.children[0].dropdown.close(true);
            }
        }

[whyJoe]

HI,did you solve this problem?

Did you read the comments ?

I tried it with jexce4,but can't work. I found a new way, you can refer to it.

[Malcx]

If anyone else needs to do this I've a simple version working on Jspreadsheet v4.10.1

let myInstance = jspreadsheet(document.getElementById("divHolderWhereTableWillGo"), 
{
	data:myData,
	columns:myColumns
}); 


setTimeout(function(){
	$(document.getElementById("divHolderWhereTableWillGo")).find(".jexcel_dropdown").each(function(){
		$(this).on("click", function(){
			var columnId = $(this).data("x");
			var rowId = $(this).data("y");
			myInstance.openEditor(myInstance.records[rowId][columnId], true);
		});
	});
}, 100);

[Hrithikcse52]

i found a solution in a clean way
const cell = worksheet.jexcel?.records[y1][x1]; cell.onclick = function(){ worksheet.jexcel.openEditor(cell,true); return; };
try this one out

[kondo-to]

↑ It work for me in Jspreadsheet pro 8.7.12 ! Thanks !

// jExcelObj is instance of jspreadsheet
// in my case p = 0;
const cell = jExcelObj[p].records[y1][x1];
cell.element.onclick = function(){jExcelObj[p].openEditor(cell.element,false,new MouseEvent("dblclick")); };