How to disable editing of a cell type

Tags: #<Tag:0x00007f8b28c3c958>
#1

Hi,
I made a custom dropdown cell, and what I need is to prevent double click, or enter, to open editor.

You can find an exemple in this JSFiddle.

Can you please help me to prevent the default editor to appear ?
I’ll use classic events to detect change event on selects.

Antoine.

#2

Hey @duval.antoine

we do not have an event of a dbclick but you can use the beforeKeyDown to block Enter. What you can do for the dbclick is to check if e.target is the same as the previous target and if it is called run e.stopImmediatePropagation().

#3

Thanks, thats the code : Here in JSFiddle.

settings.beforeKeyDown = function(event){
    switch (event.key) {
        case "F2":
        case "Enter":
            event.stopImmediatePropagation();
            break;
    }
}

In this case, the user can’t press enter at any cells. How can I do the same to prevent theses keys for only “cdsa_dropdown” renderer ? (this renderer is explained in my example)

$("html > body").on("dblclick", "table > tbody > tr > td > select", function (event) {
    alert("you dbl clicked");
    event.stopImmediatePropagation();
});

EDIT : As you can see in this example, I failed to prevent dblclick event. Can you explain me why please ?

Thanks.

#4

You can use the getSelected method to check what cell has been activated https://jsfiddle.net/handsoncode/6uzxk4nf/

When it comes to dbclick maybe it will be easier to use the native events tracking

handsontable_container.addEventListener("dblclick", function(e){
	console.log(e)
});
#5

Thanks but this code you give me don’t seems to work.
Made I a mistake ?

LINK

hotElement.addEventListener("dblclick", function(event){
    console.log(event)
    event.stopImmediatePropagation();
});

Thanks

#6

Ok, right - we can close the editor then https://jsfiddle.net/handsoncode/cp2gu315/

#8

Hey @duval.antoine

deleted message = work in progress?

#9

Yes, I was working on it :wink:
I found how to disable the dbl click with this code :

instance.view.wt.update("onCellDblClick", function (event, cell) {
    let renderer = instance.getSettings().columns[cell.col].renderer;
    if (renderer !== "cdsa_dropdown") {
        var activeEditor = instance.getActiveEditor();
        activeEditor.beginEditing();
    }
});

Now I have to do the same for the “F2” and “Enter” key press. In our example, it’s blocking all columns. I need to block only “cdsa_dropdown” columns.

Do you know how I can do that ?

Thanks.

#10

You can check if the column of a selected cell as the selected cell quals edited cell https://jsfiddle.net/handsoncode/6uzxk4nf/

#11

That’s good for me, you can close :smiley:
Thanks again.

Antoine

#12

great :slight_smile: Closing

#13