Hey!
I have a small issue with making my custom renderer work like I want it to. The issue I have is with the same project as my previously posted question.
I have a table with about 500 data rows. The table is recording input from all employees of the organization about their New year resolution for the first half of the next year.
Columns in the table:
- Employee Name
- ID
- Resolution name
- Resolution update (after 3 months)
- Final result
- Ranking and
- Three more columns with “LIKE BUTTON” (each for Resolution name, update and final result).
LIKE BUTTON is similar to Instagram likes and is displayed as a division using inneHTML. My custom renderer is working fine to get the data and render the table.
But if my input field is NULL, the LIKE BUTTON is not going to be visible (which is also working correctly) and if I click into the cell to type value in it; I need to press a separate SAVE BUTTON to send it to the database. However, if I don’t press the SAVE BUTTON and move to a different cell (the input data exists as temporary data in all fields which got data entered into them) the LIKE BUTTON becomes visible and can store data which is becoming a huge problem. I checked all my backend files and it seems like it is an issue with the Handsontable rendering.
My Renderer:
function detailRenderer(instance, td, row, col, prop, value, cellProperties) {
if (col == 5) {
if (value != null && instance.getDataAtCell(row, 9) != 0){
if(instance.getDataAtCell(row, 13)!= 0) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like" id="like">'+value + '<div class="in-like" id="in-like" style="color:red; text-align:center;"><i class="fas fa-heart" data-type="goalLikes" id="goalLikesButton'+row+'" data-id="goalLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i>' + instance.getDataAtCell(row, 9) + '</div></div>';
}
else {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like" id="like">'+value + '<div class="in-like" id="in-like" style="color:red; text-align:center;"><i class="far fa-heart" data-type="goalLikes" id="goalLikesButton'+row+'" data-id="goalLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i>' + instance.getDataAtCell(row, 9) + '</div></div>';
}
}
else if(value != null && instance.getDataAtCell(row, 9) == 0){
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like" id="like">'+value+'<div class="in-like" id="in-like" style="color:red; text-align:center;"><i class="far fa-heart" data-type="goalLikes" id="goalLikesButton'+row+'" data-id="goalLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i></div></div>';
}
else{
Handsontable.renderers.TextRenderer.apply(this, arguments);
}
}
else if (col == 6) {
if (value != null && instance.getDataAtCell(row, 10) != 0){
if(instance.getDataAtCell(row, 14)!= 0) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like">'+value + '<div class="in-like" id="in-like" style="color:red; text-align:center;"><i data-type="replyLikes" id="replyLikesButton'+row+'" class="fas fa-heart" data-id="replyLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i>' + instance.getDataAtCell(row, 10) + '</div></div>';
}
else {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like">'+value + '<div class="in-like" id="in-like" style="color:red; text-align:center;"><i data-type="replyLikes" id="replyLikesButton'+row+'" class="far fa-heart" data-id="replyLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i>' + instance.getDataAtCell(row, 10) + '</div></div>';
}
}
else if(value != null && instance.getDataAtCell(row, 10) == 0){
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like">'+value+'<div class="in-like" id="in-like" style="color:red; text-align:center;"><i data-type="replyLikes" id="replyLikesButton'+row+'" class="far fa-heart" data-id="replyLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i></div></div>';
}
else{
Handsontable.renderers.TextRenderer.apply(this, arguments);
}
}
else if (col == 8) {
if (value != null && instance.getDataAtCell(row, 11) != 0){
if(instance.getDataAtCell(row, 15)!= 0) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like">'+value + '<div class="in-like" id="in-like" style="color:red; text-align:center;"><i data-type="resultLikes" id="resultLikesButton'+row+'" class="fas fa-heart" data-id="resultLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i>' + instance.getDataAtCell(row, 11) + '</div></div>';
}
else {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like">'+value + '<div class="in-like" id="in-like" style="color:red; text-align:center;"><i data-type="resultLikes" id="resultLikesButton'+row+'" class="far fa-heart" data-id="resultLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i>' + instance.getDataAtCell(row, 11) + '</div></div>';
}
}
else if(value != null && instance.getDataAtCell(row, 11) == 0){
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = '<div class="like">'+value+'<div class="in-like" id="in-like" style="color:red; text-align:center;"><i data-type="resultLikes" id="resultLikesButton'+row+'" class="far fa-heart" data-id="resultLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i></div></div>';
}
else{
Handsontable.renderers.TextRenderer.apply(this, arguments);
}
}
else{
Handsontable.renderers.TextRenderer.apply(this, arguments);
}
}
My Handsontable:
hot = new Handsontable(container, { licenseKey: 'non-commercial-and-evaluation', data: data, height: $(window).height(), {% if(window.width() > 1350) %} width: $(window).width()-220, {% else %} width: $(window).width(), {% endif %} manualRowResize: true, rowHeaders: true, rowHeights: 50, className: 'htMiddle', renderer: detailRenderer, fillHandle: false, preventScrolling: false, hiddenColumns: {columns: [0,9,10,11,12, 13, 14, 15]}, filters: true, dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'], columns: [ {data:'KEY', title:'', width:50, readOnly:true}, {data:'RANK', title:'RANK', width:70, type:'dropdown', source:[' ','🥇','🥈','🥉']}, {data:'SYACD', title:'USERID', readOnly:true, width:100}, {data:'SYANM', title:'USERNAME', width:145, readOnly:true}, {data:'AFFILIATION', title:'DESIGNATION', width:253, readOnly:true}, {data:'GOAL_COMMIT', title:'NEW YEAR RESOLUTION', width:325, readOnly:true}, {data:'REPLY_COMMENT', title:'HALF-TIME COMMENT', width:325, readOnly:true}, {data:'RESULT', title:'RESULT', width:70, readOnly:true, source: [' ','⭕', '✖️']}, {data:'GOAL_COMMENT', title:'FINAL COMMENT', width:325, readOnly:true}, {data:'GOAL_COMMIT_LIKES'}, {data:'REPLY_COMMENT_LIKES'}, {data:'GOAL_COMMENT_LIKES'}, {data: 'SYACD'}, {data: 'GOAL1'}, {data: 'GOAL2'}, {data: 'GOAL3'}, ], afterChange: getChangedRows, afterGetRowHeader: function(col, TH) { TH.className = 'htMiddle' }, cells: function (row, col) { var cellProperties = {}; cellProperties.renderer = detailRenderer; return cellProperties; } });
Kindly let me know if I need to explain anything else. Thanks.