jspreadsheet / pro

Jspreadsheet Pro | The javascript spreadsheet
https://jspreadsheet.com/
15 stars 1 forks source link

Unsetting readOnly for a cell #314

Closed JohnPatrickOshaughnessy closed 8 months ago

JohnPatrickOshaughnessy commented 9 months ago

I have another issue. When I explicitly remove readOnly status from a cell where readOnly status was applied via column config then, although I can enter text/numbers in the cells, when I tab out of the cell the old value returns.

Here is the code to reproduce, based on the example at: https://jspreadsheet.com/docs/examples/readonly

<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div>

<script>

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('<add licence here>');

// Create a new spreadsheet
var worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['Mazda', 2001, 2000],
            ['Peugeot', 2010, 5000],
            ['Honda Fit', 2009, 3000],
            ['Honda CRV', 2010, 6000],
        ],
        columns: [
            {
                type: 'text',
                title:'Description',
                width:'200px',
                readOnly:true
            },
            {
                type: 'text',
                title:'Year',
                width:'200px',
                readOnly:true
            },
            {
                type: 'text',
                title:'Price',
                width:'100px',
                mask:'#.##',
                readOnly:true
            }
        ],
    }],
});

//Make last row editable
sheet = jspreadsheet.spreadsheet[0].worksheets[0];
let cell1 = cell = sheet.getCell('A4');
cell1.classList.remove('readonly');

let cell2 = cell = sheet.getCell('B4');
cell2.classList.remove('readonly');

let cell3 = cell = sheet.getCell('C4');
cell3.classList.remove('readonly');

</script>
</html>
JohnPatrickOshaughnessy commented 9 months ago

This is resolved, kind of. For the benefit of others reading this, notice that in the column config above I use readOnly: true as per the example in the documentation (as of Jan 30 2024) . Turns out that is should be readonly: true . Using readOnly: true causes the 'old value returns' behaviour when a cell has read only status removed. When readonly: true is used the behaviour does not occur when read only status for a cell is removed.

hodeware commented 8 months ago

We have updated the precedence for that. So, basically both attributes should work as expected.