CODEWITHSUNDEEP
jqueryhandsontable
Shrui
Shrui

Reputation: 59

Handsontable Hide Rows and Bold Changed Values

I'm using handsontable for changing the information in a 2D array. Due to the size of the array I need there to be a scroll bar as otherwise checkboxes and other changes take about 3 seconds to respond. The code Im using works fine without the scroll feature but because of the reason above its not really an option unless I split up the array and put them in separate tables, one after another so that it appears as one table but that leads to other issues so would rather keep the scroll bar.

I have checkboxes in each row which are looked at by the renderer. When checked the row gets class selected, otherwise each row has class notSelected

Handsontable.renderers.CheckboxRenderer.apply(this, arguments);
if(value==false || value==null) {
    $(td).parent().addClass('notSelected');
    $(td).parent().removeClass('selected');
}else if(value==true){
    $(td).parent().addClass('selected');
    $(td).parent().removeClass('notSelected');
}

There are two buttons that use this, one to only show rows with class selected and the other to return table to previous version containing all rows while keeping the selected class on those that had it. Using the below code.

$("#showSelected").click(function() {
    $(".notSelected").hide();
});

$("#showAll").click(function() {
    $(".notSelected").show();
});

Due to the scroll window only rendering the rows that appear on screen, only the rows selected in the current window are shown and I can scroll down and a random amount of rows of both classes with be rendered.

The other issue is when I bold the values in cells that have been changed, the cells in the same position are also made bold, eg, If I change the cell in row 4, col 5 then when I scroll down every value in row 4, col 5 is made bold despite not being changed. I am using the code found here: How can I change the color of a changed cell in Handsontable? Is there a way to fix these 2 issues while keeping the scroll bar? Is there a way to tell what the most recent changed cell is? Or will I just have to try and work through my problems with splitting up my array and making multiple tables?

EDIT: Thanks to the person updating the highlighting code I now have it working. Just need to hide and show rows now.

Upvotes: 0

Views: 2300

Answers (1)

Shrui
Shrui

Reputation: 59

Worked it out. Couldnt find a way to hide the rows due to how Handsontable works so this copies my array data and then interates through it splicing any rows that have been dechecked or havent been changed. 

$('#showSelected').click(function(){
    dataTemp = $.extend(true, [], data);
    for(var i=0;i<data.length;i++){
        if(data[i][1]==false||data[i][1]==null){
            var unselected = data.splice(i,1);
            i--;
        }
    }
    $(".handsontable").handsontable('render');
});

And to show all again I just put the dataTemp array back to data due to other reasons in the code so you could just put dataTemp into loadData if it wasnt an issue for others.

$("#showAll").click(function() {
    var ht =$(".handsontable").handsontable('getInstance');
    data=$.extend(true, [], dataTemp);
    ht.loadData(data);
    $(".handsontable").handsontable('render');
});

Upvotes: 1

Related Questions