Search code examples
jquerycellreadonlyhandsontable

Handsontable make newly inserted cell editable while already loaded cell with value readonly


I am using handsontable to load values and edit those.

I have a table as follows:

 var cw = document.getElementById('tableorder').clientWidth;
                        var rest = cw - 550;
                        var container = document.getElementById('tableorder');
                        ordertable = new Handsontable(container, {
                            data: data,
                            colHeaders: ['Collection Mode', 'Remarks','Amount'],
                            columns: [
                                {data: 4, readOnly: false, type: 'autocomplete', source: collectionmethod, validator: collectionmethod_validations, strict: true},
                                {data: 5, readOnly: false},
                                {data: 3, readOnly: false, type: 'numeric', format: '0.000', validator: qty_validations, allowInvalid: true}
                            ],
                            minSpareRows: 1,
                            rowHeaders: true,
                            contextMenu: ['row_above', 'row_below', 'remove_row', 'undo', 'redo'],
                            colWidths: [250, rest, 250],
                            autoWrapRow: true,
                            autoWrapCol: true,
                            beforeRemoveRow: removerow_validation
                        });

I have a certain set of values from ajax and I am creating table:

What I need is:

I need to make certain cells read-only. But If I insert another row then the new row containing that particular cell should be editable

In my case I need the following cell to be read-only

{data: 3, readOnly: false, type: 'numeric', format: '0.000', validator: qty_validations, allowInvalid: true}

I tried by giving readOnly: false but if I add new row then also it becomes readonly.

How can I make already loaded cell read-only and newly inserted cell editable?


Solution

  • Got the solution:

    cells :function(row, col, prop) {
                                        var cellProperties = {};
    
                                        if (row < total_length) {
                                            cellProperties.readOnly = true;
    
                                        }
                                        else
                                        {
                                            cellProperties.readOnly = false;
                                        }
    
                                            return cellProperties;
                                    }