Reloading a single DIV

param556 · 6 February 2023 10:11

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 concern is, I am already using a custom renderer to initialize the innerHTML into the table. I am storing the likes in a separate backend PHP file than the table’s data file.

I know that there is a way to reload only the specific division using:
$("#in-like").load("#in-like>*");
I have used this and renders the entire table itself which is fine for me, but then it should also take me back o the same cell, I was looking at.

For example, if I was at row 100 and I liked another employees Resolution at row 100, it should display the same row on reloading the table. Is there any way to do that?

I am sorry if I am bad at explaining questions.
(I edited the question to make more sense, apologies)

adrian.szymanski · 27 December 2022 09:56

Hi @param556

Thank you for detailed description. If I understood correctly I think that the method you are looking for is scrollViewportTo https://handsontable.com/docs/react-data-grid/api/core/#scrollviewportto that will allow you to jump to the chosen row after the reload. Would that help you to solve the issue?

param556 · 28 December 2022 01:46

Hey,
Thank you for your reply. I used the scrollViewportTo and achieved the results. But looks like there is a delay if someone wants to render a cell and use scrollViewportTo. So I dropped the method and just used toggle class for the LIKE BUTTON and a full render on the entire column. Just try to check when you guys have time, why render and scrollViewportTo have a lag when used together sequentially. I’ll try to give you guys a fiddle in a day or two during the winter holidays.

aleksandra_budnik · 12 January 2023 06:59

Hi @param556

Should we keep this issue opened, or it’s already sorted out?

param556 · 12 January 2023 07:21

Hey! I’m sorry for the trouble. Gimme about a week, once I finish what I planned to achieve closing it would be helpful.

aleksandra_budnik · 12 January 2023 07:35

OK, no problem.

param556 · 16 January 2023 04:04

Hey!
Is there any way to get the initial index of a row after filter_by_value

For ex: I have 50 rows, I am going to search for my name (let’s say is in the 40th row). On searching, by default when the result is loaded, the row index becomes 0,1,2,3 and so on. Is there any way, that even though the table might show row 0, 1, 2, 3, etc. I should be able to use the row index value as 40 (the initial value before search)

aleksandra_budnik · 18 January 2023 13:47

Hey @param556

by the initial row, do you mean the row index that was set while loading the data? If so you can use those method to get physical row and column index

param556 · 19 January 2023 01:59

Hey @aleksandra_budnik Thank you for letting me know about this. I have tried it and it worked.
I had seen it earlier, but the sentence framing in the documentation confused me.

Suggestion for documentation:
In the documentation it is mentioned Visual row index, the meaning of this word can quiet confuse people (specially rookies like me) who are searching for the answer as it means the row index that is visible. In my case you can see that upon searching the row index that is visible, changes (from 40 to 1). So if someone is searching for a solution like mine, may get confused “Oh this says visual row index, this is not what I need”
This is just a suggestion for the change in documentation if you can do it.

Thanks again for the help!

aleksandra_budnik · 20 January 2023 13:25

Thank you for the suggestion. I will share it with our Technical Writer.

param556 · 2 March 2023 01:47

Continuing the discussion from Custom renderer not detecting NULL:

Hey @aleksandra_budnik !
It’s been a while I haven’t had the time to update or complete the project so far, so here is an update. My issue is that my renderer and my functions work in-sync as long as the user saves the data to render the like, but if they type in a value and like it and end up refreshing without saving the value, the renderer still updates the database.
Basically, the user inputs a data into the resolution column and immediately the “Like button” renders next to it because there is data in it. The next immediate protocol is to save the data, but if the user instead refreshes (assuming they are high IQ geniuses), the heart icon is still updated in the data base but the value is gone because it is temporary and not saved. I am handling both the “Like button” and the value appropriately but unable to find a way out, let me know if I am doing something wrong, here is the code:

hot = new Handsontable(container, {
	licenseKey: 'non-commercial-and-evaluation',
		data: data,
		{% if(window.width() >= 1350) %}
			height: $(window).height(),
			width: $(window).width()-220,
		{% else %}
			width: $(window).width()-12,
			height: $(window).height()-180,
		{% 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},
			{% if systemUser == 1 %}
				{data:'RANK',	    	        title:'RANK', width:70, type:'dropdown', source:[' ','🥇','🥈','🥉']},
			{% else %}
				{data:'RANK',	    	        title:'RANK', width:70, readOnly:true},
			{% endif %}
			{data:'USRID',	    	        title:'USRID', className: 'htCenter htMiddle', readOnly:true, width:100},
		    {data:'USRNM',			        title:USRNM', width:145, readOnly:true},
		    {data:'AFFILIATION',			title:'AFFILIATION', width:253, readOnly:true},
		    {data:'GOAL_COMMIT',			title:'GOAL_COMMIT', width:325, readOnly:true},
		    {data:'REPLY_COMMENT',	    	title:'REPLY_COMMENT', width:325, readOnly:true},
		    {data:'RESULT',	    	        title:'RESULT', width:70, readOnly:true, source: [' ','⭕', '✖️']},
		    {data:'GOAL_COMMENT',	    	title:'GOAL_COMMENT', width:325, readOnly:true},
			
			{data:'GOAL_COMMIT_LIKES'},
			{data:'REPLY_COMMENT_LIKES'},
			{data:'GOAL_COMMENT_LIKES'},
			{data: 'USRCD'},
			{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;
			
		}
	});

My getChangedRows:

> function getChangedRows(changes) {
>         if(changes == null) {
>             return;
>         }
>         changes.forEach(([row, prop, oldValue, newValue]) => {
>             //console.log(oldValue, newValue);
>             if(oldValue != newValue){
>                 let ID = hot.getDataAtRowProp(row,"USRNM");
>                 changeList.push(ID);
>                 if(newValue==null || newValue=="") {
>                     deleteFlag = 1;
>                     //get the value at the cell that was changed
>                     var cellValue = hot.getDataAtRowProp(row, prop);
>                     // get the value at the heart icon cell
>                     var gCommitHeartValue = hot.getDataAtRowProp(row, "GOAL_COMMIT_LIKES");
>                     gCommitHeartValue = 0;
>                     var rCommentHeartValue = hot.getDataAtRowProp(row, "REPLY_COMMENT_LIKES");
>                     rCommentHeartValue = 0;
>                     var gCommentHeartValue = hot.getDataAtRowProp(row, "GOAL_COMMENT_LIKES");
>                     gCommentHeartValue = 0;
>                 }
>                 if(oldValue== "" || oldValue==null) {
>                     //get the value at the cell that was changed
>                     var cellValue = hot.getDataAtRowProp(row, prop);
>                     // get the value at the heart icon cell
>                     console.log("oldValue is null");
>                     deleteFlag = 1;
>                     if(oldValue != newValue) {
>                         if(prop == "GOAL_COMMIT") {
>                             var gCommitHeartValue = hot.getDataAtRowProp(row, "GOAL_COMMIT_LIKES");
>                             gCommitHeartValue = 0;
>                             console.log("gCommitHeartValue: " + gCommitHeartValue);
>                         }
>                         else if(prop == "REPLY_COMMENT") {
>                             var rCommentHeartValue = hot.getDataAtRowProp(row, "REPLY_COMMENT_LIKES");
>                             rCommentHeartValue = 0;
>                             console.log("rCommentHeartValue: " + rCommentHeartValue);
>                         }
>                         else if(prop == "GOAL_COMMENT") {
>                             var gCommentHeartValue = hot.getDataAtRowProp(row, "GOAL_COMMENT_LIKES");
>                             gCommentHeartValue = 0;
>                             console.log("gCommentHeartValue: " + gCommentHeartValue);
>                         } 
>                     }
>                 }
>             }
>             //get the column number
>             var col = hot.propToCol(prop);
>             if(col == 5 || col == 6 || col == 8 || col == 9 || col == 10 || col == 11 || col == 13 || col == 14 || col == 15) {
>                 if(col == 5) {
>                     likesid = 1;
>                 }
>                 else if (col == 6) {
>                     likesid = 2;
>                 }
>                 else if (col == 8) {
>                     likesid = 3;
>                 }
>                 var row = hot.getSelected()[0];
>                 //get the data before editing
>                 var oldData = hot.getSourceDataAtRow(row);
>                 console.log(oldData);
>                 //get the data after editing
>                 var rowData = hot.getDataAtRow(row);
>                 console.log(rowData);
>                 if(oldData != rowData) {
>                     var param = {
>                         'challengeID': challengeID,
>                         'userID': userID,
>                         'likesid': 0,
>                         'deleteFlag': deleteFlag
>                     };
>                 }else {
>                     var param = {
>                         'challengeID': challengeID,
>                         'userID': userID, // 投稿がいいね! されたユーザーの ID - id of the user whose post is liked
>                         'likesid': likesid,
>                         'deleteFlag': deleteFlag
>                     };
>                 }
>                 var userID = hot.getDataAtRowProp(row, "SYACD");
>                 var challengeID= $("#title").data('challengeid');
>                 //console.log(param);
>                 var url = 'like_delete';
>                 $.ajax({
>                     url: url,
>                     type: 'GET',
>                     data: param
>                 });
>             }
>         });
>     }

My renderer:

function detailRenderer(instance, td, row, col, prop, value, cellProperties) {
        if (col == 5) {
            if (value != null && instance.getDataAtCell(row, 9) != 0){
                if(value !='' && instance.getDataAtCell(row, 13)!= 0) {
                    Handsontable.renderers.TextRenderer.apply(this, arguments);
                    td.innerHTML = '<div class="like">'+value + '<div class="in-like" style="color:red; text-align:center;"><i data-type="goalLikes" id="goalLikesButton'+row+'" class="fas fa-heart" data-id="goalLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i>' + instance.getDataAtCell(row, 9) + '</div></div>';
                }
                else if(instance.getDataAtCell(row, 13)== 0){
                    if(value !=''){
                        Handsontable.renderers.TextRenderer.apply(this, arguments);
                        td.innerHTML = '<div class="like">'+value + '<div class="in-like" style="color:red; text-align:center;"><i data-type="goalLikes" id="goalLikesButton'+row+'" class="far fa-heart" data-id="goalLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i>' + instance.getDataAtCell(row, 9) + '</div></div>';
                    }
                    else {
                        Handsontable.renderers.HtmlRenderer.apply(this, arguments);
                    }
                }
                else {
                    Handsontable.renderers.HtmlRenderer.apply(this, arguments);
                }
            }
            else if(value != null && instance.getDataAtCell(row, 9) == 0){
                if(value!=''){
                    Handsontable.renderers.HtmlRenderer.apply(this, arguments);
                    td.innerHTML =   '<div class="like">'+value+'<div class="in-like" style="color:red; text-align:center;"><i data-type="goalLikes" id="goalLikesButton" class="far fa-heart" data-id="goalLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row,12)+'" onclick="likesFunction(this)" ></i></div></div>';
                }
                else {
                    Handsontable.renderers.HtmlRenderer.apply(this, arguments);
                }
            }
            else{
                    Handsontable.renderers.HtmlRenderer.apply(this, arguments);
            }
        }
        else if (col == 6) {
            if (value != null && instance.getDataAtCell(row, 10) != 0){
                if(value !='' && instance.getDataAtCell(row, 14)!= 0) {
                    Handsontable.renderers.TextRenderer.apply(this, arguments);
                    td.innerHTML = '<div class="like">'+value + '<div class="in-like" style="color:red; text-align:center;"><i data-type="replyLikes" id="replyLikesButton'+row+'" class="fas fa-heart" data-id="goalLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i>' + instance.getDataAtCell(row, 10) + '</div></div>';
                }
                else if(instance.getDataAtCell(row, 14)== 0){
                    if(value !=''){
                        Handsontable.renderers.TextRenderer.apply(this, arguments);
                        td.innerHTML = '<div class="like">'+value + '<div class="in-like" style="color:red; text-align:center;"><i data-type="replyLikes" id="replyLikesButton'+row+'" class="far fa-heart" data-id="goalLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i>' + instance.getDataAtCell(row, 10) + '</div></div>';
                    }
                    else {
                        Handsontable.renderers.HtmlRenderer.apply(this, arguments);
                    }
                }
                else {
                    Handsontable.renderers.HtmlRenderer.apply(this, arguments);
                }
            }
            else if(value != null && instance.getDataAtCell(row, 10) == 0){
                if(value!=''){
                    Handsontable.renderers.TextRenderer.apply(this, arguments);
                    td.innerHTML = '<div class="like">'+value+'<div class="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.HtmlRenderer.apply(this, arguments);
                }
            }
            else{
                if(value!=''){
                    Handsontable.renderers.TextRenderer.apply(this, arguments);
                }
            }
        }
        else if (col == 8) {
            if (value != null && instance.getDataAtCell(row, 11) != 0){
                if(value !='' && instance.getDataAtCell(row, 15)!= 0) {
                    Handsontable.renderers.TextRenderer.apply(this, arguments);
                    td.innerHTML = '<div class="like">'+value + '<div class="in-like" style="color:red; text-align:center;"><i data-type="resultLikes" id="resultLikesButton'+row+'" class="fas fa-heart" data-id="goalLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i>' + instance.getDataAtCell(row, 11) + '</div></div>';
                }
                else if(instance.getDataAtCell(row, 15)== 0){
                    if(value !=''){
                        Handsontable.renderers.TextRenderer.apply(this, arguments);
                        td.innerHTML = '<div class="like">'+value + '<div class="in-like" style="color:red; text-align:center;"><i data-type="resultLikes" id="resultLikesButton'+row+'" class="far fa-heart" data-id="goalLikesButton'+row+'" data-userid="'+instance.getDataAtCell(row, 12)+'" onclick="likesFunction(this)"></i>' + instance.getDataAtCell(row, 11) + '</div></div>';
                    }
                    else {
                        Handsontable.renderers.HtmlRenderer.apply(this, arguments);
                    }
                }
                else {
                    Handsontable.renderers.HtmlRenderer.apply(this, arguments);
                }
            }
            else if(value != null && instance.getDataAtCell(row, 11) == 0){
                if(value!=''){
                    Handsontable.renderers.TextRenderer.apply(this, arguments);
                    td.innerHTML = '<div class="like">'+value+'<div class="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.HtmlRenderer.apply(this, arguments);
                }
            }
            else{
                if(value!=''){
                    Handsontable.renderers.TextRenderer.apply(this, arguments);
                }
            }
        }
        else{
            Handsontable.renderers.TextRenderer.apply(this, arguments);
        }
    }

I have put this here since the other custom renderer issue was closed, apologies if it is unrelated.
Any help in understanding what I am doing wrong is appreciated.
Thanks!

aleksandra_budnik · 2 March 2023 07:56

Hi @param556

We cannot do a code review without a support plan confirmation, as it is available only in higher plans. Could you send me a message to support@handsontable.com with your license details?

param556 · 13 March 2023 05:09

There is a thing like that? I don’t think I have any such. Sorry for that then!

aleksandra_budnik · 7 April 2023 07:28