Disabling editor when double clicked on a link renderer

Tags: #<Tag:0x00007efc71a36488>
#1

Hi

I am using a custom renderer for displaying data in the form of link, something similar to the example given here: https://jsfiddle.net/handsoncode/4k3f7xnz/1/

Would like to know if there is a way I can prevent double click and make the cell non-editable. Currently when it is double clicked, the value gets converted to a text which can be edited

41%20AM
Screen Shot 2021-11-03 at 10.50.41 AM.png1152×432 87.3 KB

In the project I am working on, we have an object as data value, and as part of the link we display value for one of the keys

export function linkSupportedRenderer(
  _instance,
  td,
  _row,
  _col,
  _prop,
  value,
  _cellProperties,
) {
  // eslint-disable-next-line prefer-rest-params
  Handsontable.renderers.BaseRenderer.apply(this, arguments);
  Handsontable.dom.empty(td);
  // value is the dictionary 
  const labelVal = get(value, 'label');
  if (!isUndefined(labelVal)) {
    Handsontable.dom.fastInnerHTML(
      td,
      `<a title='${get(value, 'title')}' href='#'>${labelVal}</a>`,
    );
  } else {
    // eslint-disable-next-line prefer-rest-params
    Handsontable.renderers.TextRenderer.apply(this, arguments);
  }
}

So when we double click, the cell value turns into [object Object] which is not a correct UX

36%20AM

#2

Hi @santhoshnarme

you have two options to choose

  1. editor: false - line 106 here https://jsfiddle.net/97ax05gt/1/ - it does not allow to dbclick to open the cell editor or type anything my keydown. But it allows to paste data inside the cell and autofill
  2. readOny: true - line 106 here https://jsfiddle.net/97ax05gt/3/ - it block everything as option 1 + also user cannot paste anything to that cell or autofill a value
#3

Thanks for the solution, would like to know if I can define this inside the renderer function ? as explained earlier, and in the custom renderer function: linkSupportedRenderer, I conditionally render the link otherwise a text.

When link is rendered, I would like to have the editor set to false and otherwise set to tru

#4

Yes, you can. Here https://jsfiddle.net/hutj3gym/2/ is the updated demo - line 20 is the place where I define the readOnly state within the cell renderer.

#5

I think that we can close the topic as there are no further questions.

Please feel free to open a new thread when needed.

#6