CODEWITHSUNDEEP
javascripthandsontable
Vyacheslav
Vyacheslav

Reputation: 27211

Update particular cell in Handsontable

Is it possible to force update only one td (cell) for view ? There is a method hot.render(), but it rerenders all cells.

I want to update table content JSON data (hot.getData()) using ajax, but I can't find how to force render the table. My table is so huge to rerender each time I receive the data.

E.g.,

$.ajax(url,... ,success: function(d){
var data = hot.getData();
data[parseInt(d['row'],10)][d['col']] = d['value'];
hot.render();//please, change this function into more simple.
},
...
);

is it possible to update a TD-cell at [row,col]?

Upvotes: 3

Views: 8426

Answers (3)

Igor Stojadinović
Igor Stojadinović

Reputation: 76

You can use setDataAtCell() method to update one or more cells.

setDataAtCell(row, column, value, source)

Set new value to a cell. To change many cells at once (recommended way), pass an array of changes in format [[row, col, value], ...] as the first argument.

Source: https://handsontable.com/docs/7.2.2/Core.html#setDataAtCell

For example:

var row = 3;
var col = 7;
var value = "Content of cell 3,7";

hot.setDataAtCell(row, col, value); // Update a single cell

Method also accepts an array of values to update multiple cells at once. For example:

var cell_3_7 = [3, 7, "Content of cell 3,7"];
var cell_5_2 = [5, 2, "Content of cell 5,2"];

hot.setDataAtCell([ cell_3_7, cell_5_2 ]); // Update a multiple cells

Note that Handsontable documentation does not recommend re-rendering the whole table manually.

render()

Calling this method manually is not recommended. Handsontable tries to render itself by choosing the most optimal moments in its lifecycle.

Source: https://handsontable.com/docs/7.2.2/Core.html#render

Upvotes: 3

Mayank Sahay
Mayank Sahay

Reputation: 39

I agree complete grid rendering is good , however there is one drawback.When we render the complete grid it will scroll back to the row 1 , it will not store the last view we have before render.E.g. i am in the row number 100 as soon as i render grid will come back to row number 1 , now user has to scroll back to row number 100 again which is frustrating.

Any solution to this issue.

I found we could use hot.selectCell(100,1) to go back to row hundred , however how do i store that we were in the row number 100 programmatically, so that i could set it back to that row.

I did one customRendering to change the value of the Grid by using below code, however it has some performance issue when we have large number of row to change.

//Below code will render one row ,similarly apply the loop to modify multiple row.

data.Records[i].Values.forEach(function(value, ix) {
hot.setDataAtCell(i, ix, value);
//i is row number , ix is the column number , v is the new value.
}

However hot.setDataAtCell(i, ix, v) is a costly, so if you have a large number of row then it will hit the performance.However benefit is it will do the custom(single/mulitiple) cell/row rendering without scrolling the grid and preserving the user view.

P.S. in place of hot.setDataAtCell you could use setDataAtRowProp to set the value for a row , however i have not tried.

Upvotes: 4

ZekeDroid
ZekeDroid

Reputation: 7209

Re-rendering the entire table is the only way Handsontable will allow you to render and it's there for a few good reasons. First off, it doesn't matter how large your table is since there is virtual rendering in use. This means that it will only render what you can see plus a few more rows. Even if you had trillions of rows and columns, it would still just render enough for you to think it's fully rendered. This is not an intensive task assuming you're not doing something funky with a custom renderer.

The other reason why it renders everything from scratch is that it's Handsontable's way of keeping a stateless DOM object. If you started manually rendering specific cells then you could end up with an out of sync looking table. And, again, since virtual rendering restricts what gets rendered, there's no performance issue associated with a full re-rendering.

Upvotes: 3

Related Questions