CODEWITHSUNDEEP
javascripthandsontable
Erlaunis
Erlaunis

Reputation: 1451

Edit cell properties of a handsontable grid

I have a Handsontable grid where the user will enter some values to insert them in the database. When he submits the grid, I want specifics cells to be "readOnly". In this case, I want the first column to be "readOnly".

I use Ajax to send my data in my database. And in my callback function I want to edit the cells properties to "readOnly".

So what I have for now is :

var cellProperties={};
    var i;
    for (var i = 0; i < data_traitement.length; i++) {

        cellProperties.readOnly = true;
        return cellProperties;
    }

But the "cellProperties" option can only be used in the Handsontable definition. So I don't know what to use to do this.

Can someone help me please ?

EDIT :

With the advice of ZekeDroid, I tried to modify my cells definition : So I've got this :

cells:function(row,col,prop){
    var cellProperties = {};

    if ([0].indexOf(row) !== -1 && col >= 0) 
    {
        cellProperties.readOnly = true;
    }

    if (readOnlyCells[[row,col]]) {
        cellProperties.readOnly = true;
    }

    return cellProperties;
    }

In my callback function, if I understood well, I have to change this readOnlyCells to true.

So I made this :

for (var i = 0; i < data_traitement.length; i++) {
        readOnlyCells[[i,0]] = true; //I'm not sure of this line

    }
    hot.render();

Upvotes: 1

Views: 6426

Answers (2)

mpusarla
mpusarla

Reputation: 497

Can you try implementing a custom Renderer for this column? Then you can control the read only for every cell within that column.

Example:

function customReadOnlyRenderer(instance, td, row, col, prop, value, cellProperties) {

    // your business logic to determine read only property of the cell
    cellProperties.readOnly = true or false;
    Handsontable.TextCell.renderer.apply(this, arguments);
}

After your ajax call, you update your data source and call render. The renderer will be invoked for every cell on this column with the latest data from the source.

Upvotes: 1

ZekeDroid
ZekeDroid

Reputation: 7209

If you have your columns option set up, which you should, you can simply update the options using your HOT instance and the function updateSettings(). It would work like so:

hot.updateSettings({
    columns: newColumns
});

In your case, newColumns should be the new definition of your columns. I suggest making a function that returns this new object. This object would be defined as in the documentation page. On your ajax callback you'd make sure this new definition has the first column be readOnly:true and you're done!

If you wanted to do just cells, it could be easier than this. You can keep a map of cell coordinates like so:

var readOnlyCells = {};

Then on your callbacks, add the key value pair cell coordinates: readOnlyCells[[row,col]] = true. After this, you should just make sure your initial cells definition was as follows:

cells: function(row, col, prop) {
    var cellProperties = {};

    if (readOnlyCells[[row,col]]) {
        cellProperties.readOnly = true;
    }

    return cellProperties;
}

And that's it. You would want to update the settings like with the columns but there would be no need to change code.

Upvotes: 1

Related Questions