Read Only class on vuejs Framework

Tags: #<Tag:0x00007f3444992170>

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.

Hi @arnaud.juin

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

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

Unfortunately the class is not activated.

ReadOnly is enable here (in the child component)

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.

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)