Make only one column editable and rest readonly

Tags: #<Tag:0x00007f8b1d6b2948>
#1

How can I make only one, specific column editable and rest of them to be readonly in handsontable community?

#2

Hey @kipic96

you can use columns or cells method to do it. Then you pass the editor: true for the column and editor: false inside the global table settings.

Example https://jsfiddle.net/AMBudnik/k2d560q3/

#3

Thank you very much. It worked, but I need to double mouse click to enter editing the cell value. How can I make to click only once and enter editing cell?
I don’t know how to make a jsfiddle out of my use case so I send my handsontable settings:

#4

Have you tried?

afterSelectionEnd: function(r, c, r2, c2) {
    	var cellProp = this.getCellMeta(r, c);
      
      if (r === r2 && c === c2 && !cellProp.readOnly) {
      	this.getActiveEditor().beginEditing();
      }
    },
#5

Wow, it works how I wanted now, thank you very much.

#6

One more thing, when I insert some text to cell, click outside of the cell and click the cell again the whole text is erased. How can I prevent it?

#7

Yes :slight_smile:
here’s a new demo https://jsfiddle.net/handsoncode/6ze3nto1/

#8

Yes, I can now edit the value of the cell without it being erased on start, but now I need to click twice on the cell to enter the editing again. How can I achieve both of it?

#9

what browser do you use? I’m on Chrome 74/ Win 10 and I need to click only once. It is the same for FF 66.

#10

I checked on the same browsers and on your given jsfiddle I need to click only once, but the cell value is erased on that click. And when I check it on my code I need to click twice, but the cell value is NOT erased on that click. How is that possible? It’s jsfiddle issue or have I got some error in my code?

#11

Ok, I’ve made a workaround by checking the BaseEditor.prototype.beginEditing(newInitialValue, event) function source code and replacing lines

if (this.isInFullEditMode()) {
    var stringifiedInitialValue = typeof newInitialValue === 'string' ? newInitialValue : (0, _mixed.stringify)(this.originalValue);

    this.setValue(stringifiedInitialValue);
}

with

this.setValue(newInitialValue);

And I needed to call it by:

if (r === r2 && c === c2 && c === myColumnNumber) {
      var ed = this.getActiveEditor();
      ed.beginEditing(currentCellValue);            
}

The problem is solved, it goes on editing on one click and doesn’t remove the cell value, thank you very much for your help :slight_smile:

#12

I’m glad to see this working. Thank you for the update.

#13