Dynamically making a column readonly

Getting help Questions
1

Hi,

After a handsontable instance is created, I need to be able to changed a column’s readOnly status. How can I do this? I’ve tried the following but to no avail:

const COLUMN_INDEX = 2; // column index I need to change
const SETTINGS = this.handsontable.getSettings().columns;
settings[COLUMN_INDEX].readOnly = true;
context.handsontable.updateSettings(settings);
context.handsontable.render();

Thanks

2

Hi Jason,

have you tried to use updateSettings > cells?

3

Hi,

I’ve tried this, which works for the readonly, but loses all other ‘styling’ against other cells. Existing cell styles are lost and in-cell html markup is changed to render as a string. Also, comments disappear. This is what I’ve used:

context.handsontable.updateSettings({
    cells: (row: number, col: number) => {
    const cellProperties: any = {};
    if (col === 2)
        cellProperties.readOnly = true;
    return cellProperties;
    }
})
4

Can you share the styling that you’d like to apply?

5

I’ve worked it out - the updateSettings-> cells overwrites everything with the new structure. In my case, I had renderers being initially setup against cells which were then being lost. The way around this is to redeclare the renderers:

context.handsontable.updateSettings({
    cells: (row: number, col: number) => {
    const cellProperties: any = {};
    if (col === 2)
        cellProperties.readOnly = true;
    cellProperties.renderer = ...
    return cellProperties;
    }
})
6

Thank you for the update.

I’m glad that you’ve found a good way to do it.