Read Only class on vuejs Framework

Tags: #<Tag:0x00007efc64b079a0>
#1

Hi, after some research on your forum, I saw that the class htDimmed should be activated for read-only cells. Nevertheless, I can’t find it when I inspect the DOM. Any clue ? I’m using VueJS framework.

Thanks for your help.

#2

Hi @arnaud.juin

Yes, the htDimmed class name is automatically added to TD elements if the cell is marked as readOnly.

image
image.png1109×186 21.2 KB

Here’s a Vue example https://jsfiddle.net/handsoncode/a31mbfzp/

You can also programmatically request to check a class name via getCellMeta method and attach a class name using setCellMeta

#3

Unfortunately the class is not activated.

image
image.png824×167 4.53 KB

ReadOnly is enable here (in the child component)

image
image.png470×665 38.5 KB

As well as when I call the component
image

In effect, I can’t change the value of the cell so this component seems to be read-only but the class htDimmed is not enabled.

Thanks. I hope that’s clear enough.

#4

The hot-column definition in our examples for Vue also uses readOnly https://handsontable.com/docs/8.4.0/frameworks-wrapper-for-vue-hot-column.html so it has to be related to the renderer itself.
Here is an example of how to set up a readOnly renderer https://jsfiddle.net/handsoncode/kcsp1x6L/ (also a Vue example)

#5