Hi @aleksandra_budnik,
Below is the merge code I am using to merge the cells after the data is loaded:
function merge() {
if (hot == null) {
return;
}
var mergeCells = [], rowspan = 1, tempName = '';
var data1 = hot.getData();
var cols = 6;
for (var j = 0; j < cols; j = j + 2) {
for (var i = 0; i < data1.length; i++) {
var cellData = hot.getDataAtCell(i, j);
if (cellData === tempName) {
rowspan += 1;
}
else {
mergeCells.push({ row: i - rowspan, col: j, rowspan: rowspan, colspan: 1 })
mergeCells.push({ row: i - rowspan, col: j + 1, rowspan: rowspan, colspan: 1 })
rowspan = 1
}
tempName = hot.getDataAtCell(i, j);;
}
}
return mergeCells;
}
$.ajax({
type: "POST",
url: "LoadData",
success: function (response) {
label.text(response.data);
dataToLoad = JSON.parse(response.sheetData);
hot.loadData(dataToLoad);
hot.loadData(dataToLoad);
hot.updateSettings({ mergeCells: merge() });
hot.render();
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
There are 2 things which I need to perform, after the data is loaded.
- There should be autosave happening for every 1 min,
- Few cells are dependent on unique-id data for generating the next cell values.
For autosave, I am using the following code found in documentation of handsontable:
afterChange: function (change, source) {
//send the changes for save
clearTimeout(autosaveNotification);
if (source === 'loadData') {
return; //don't save this change
}
if (change !== null) {
var arrayOfChanges = change;
var dataToSend = {};
// unmerge ...needs to be done here..... else all the common data is going as null
dataToSend.finalData = hot.getSourceData();
dataToSend = JSON.stringify(dataToSend);
autosaveNotification = setTimeout(function () {
$.ajax({
url: "SaveCurrentData",
type: "POST",
contentType: "application/json",
dataType: "json",
data: dataToSend,
success: function (result) {
dataToLoad = result.sheetData.result;
dataToLoad = JSON.parse(dataToLoad);
hot.loadData(dataToLoad);
hot.loadData(dataToLoad);
},
error: function (xhr, resp, text) {
console.log(xhr, resp, text);
}
});
}, 1000);
}
}
For cells values which is dependent on unique-id following is code written:
beforeKeyDown: function (e) {
var selection = hot.getSelected();
var col = "";
var row = "";
if (lastChange) {
row = lastChange.row;
col = lastChange.col;
}
// ENTER
if (e.keyCode === 13) {
hot.alter('insert_row', row + 1);
var prevValue = hot.getDataAtCell(row, col - 1); // this is null, so I tried unique-id, even that is null due to merged cell, td is hidden
var cellProp = hot.getCellMeta(row, col - 1);
var dataToSend = {};
dataToSend.Value = prevValue;
dataToSend.Column = cellProp.prop;
dataToSend.Key = "ENTER";
dataToSend = JSON.stringify(dataToSend);
$.ajax({
url: "SaveChanges",
type: "POST",
contentType: "application/json",
dataType: "json",
data: dataToSend,
success: function (result) {
dataToLoad = result;
dataToLoad = JSON.parse(dataToLoad.data.result);
hot.loadData(dataToLoad);
hot.loadData(dataToLoad);
//need to check and call later whenever loaddata is called
hot.updateSettings({ mergeCells: merge() });
hot.render();
hot.selectCell(row + 1, col);
console.log(result);
},
error: function (xhr, resp, text) {
console.log(xhr, resp, text);
}
});
}
else if (e.keyCode === 9) {
}
else if (e.keyCode === 27) {
return;
}
lastChange = null;
}