JQuery handsontable after renderer make cell readonly with respect to other cell value - not working

Question

I have a handsontable with the following data in it.

var data = [
    ["2008", 10, 11, 12, 1],
    ["2009", 20, 11, 14, 0],
    ["2010", 30, 15, 12, 1]
  ];

Link: FIDDLE

What I need suppose in last column if the value is 0 then I need the corresponding column containing row's second and third column make readonly.

Please note the following image for more detail:

Handontable Renderer method is what need to use. What I used is follows:

,

Handsontable.hooks.add('afterRender', function () {
var a = $('.htCore').find('tbody tr td:nth-child(2)');
var b = $('.htCore').find('tbody tr td:nth-child(3)');
var g = $('.htCore').find('tbody tr td:nth-child(4)'); 

g.each(function (i, v) { 
if (parseFloat(g.eq(i).text()) == 0)) {
   a.eq(i).attr('readonly',true);
   b.eq(i).attr('readonly',true);
 });

But not working please guide me....

@ZekeDroid please help buddy – Santhucool Nov 03 '16 at 06:02 — Santhucool, Nov 03 '16 at 06:02

Joakim Si Ali · Accepted Answer · 2016-11-03T08:48:57.960

You don't need to use JQuery to update readOnly attribute.

You need to create a cell properties like my example :

http://jsfiddle.net/vgaybtvp/

cells: function (row, col, prop) {
    var cellProperties = {};
    var hot = this.instance;

    if((col == 2 || col == 3) && hot.getDataAtCell(row, hot.colToProp(4)) == 0) {
        cellProperties.readOnly = true;
    } else {
        cellProperties.readOnly = false;
    }

    return cellProperties;
}

Regards

score 1 · Answer 2 · answered Nov 03 '16 at 08:37

What you can use is the property read only already included in Handsontable. See below the function I call when the table is initialized, and after any change :

function updateTableReadOnly() {
  var cellPropertiesID;
  for (var i = 0; i < $("#example1grid").handsontable('getData').length; i++) {
    if ($("#example1grid").handsontable('getData')[i][4] === '0') {
      updateCellReadOnly(i,2,true)
      updateCellReadOnly(i,3,true)
    } else {
      updateCellReadOnly(i,2,false)
      updateCellReadOnly(i,3,false)
    }
  }
  $("#example1grid").handsontable('render');
}

function updateCellReadOnly(i,j,value) {
  cellPropertiesID = $("#example1grid").handsontable('getCellMeta',i,j);
  cellPropertiesID.readOnly = value;
}

Please see your fiddle updated for my working example.

Note that I modified your data to check your condition with String value.

var data = [
  ["2008", "10", "11", "12", "1"],
  ["2009", "20", "11", "14", "0"],
  ["2010", "30", "15", "12", "1"]
],

The reason is if you need to change your data directly in the table, the new value you will enter will be a String. This way the column Nissan and Toyota will change the properties dynamically depending on the value Honda. Which I suppose you wanted to achieve here.

score 0 · Answer 3 · answered May 18 '18 at 11:39

Please try this snippets

$(document).ready(function () {
var d = $("#example1grid").handsontable({
   colHeaders: ["", "Kia", "Nissan", "Toyota", "Honda"],
   cells: function(row, col, prop){
      const cellProperties = {};

    if (row === 1 && col === 2 || row === 1 && col === 3) {
       cellProperties.readOnly = true;  
    }

    if (row === 1 && col === 4){
       if (this.instance.getDataAtCell(row, col) === 0) {
       cellProperties.readOnly = true;  
    }
  }
    return cellProperties;
  }
});

var data = [
  ["2008", 10, 11, 12, 1],
  ["2009", 20, 11, 14, 0],
  ["2010", 30, 15, 12, 1]
];

$("#example1grid").handsontable("loadData", data);   
  //$('td').css('background-color', 'red');
});

JQuery handsontable after renderer make cell readonly with respect to other cell value - not working

3 Answers3