Select entire Handsontable column with icon click?

Question

I want each column in my table to have an icon that when clicked, will select the entire column. I have this working for the first (not fixed) column with a button, but cannot get the for each icon working. Also, any idea why the last column (2018) has more width and the horizontal scroll never seems to meet the end? Thanks in advance.

jQuery

container.handsontable("loadData", getData());

$("button#selectFirst").on('click', function () {
    //container.handsontable("selectCell", 0, 4)
    container.handsontable("selectCell", 0, 4, 5, 4)
});

http://jsfiddle.net/D4Kx3/5/

Answer 1

you need to add a custom renderer for the arrow like this

var myRendererArrow = function (instance, td, row, col, prop, value, cellProperties) {
    Handsontable.cellTypes.checkbox.renderer.apply(this, arguments);
    $(td).empty().append("<span class='sm-moon delBlue icon-right-arrow-17' data-icon='&#xe795;'>O</span>");
    return td;
};      

in the afterRender callback you need to add this code

afterRender:function(){
    $('input[type=checkbox]').uniform(); 
    $('.checkall').on('click', function () {
        $(this).closest('table').find('input.htCheckboxRendererInput').prop("checked",this.checked);
        $.uniform.update();//update UniformJS
    });
//select clicked column
$(".icon-down-arrow-17").on("click",function(){
    var col=$(this).closest("th").index();
    container.handsontable("selectCell", 0, col, 5, col);
}); 
//select row only change th for tr and the column on selectCell
$(".icon-right-arrow-17").on("click",function(){
    var row=$(this).closest("tr").index();
    container.handsontable("selectCell", row, 0, row, 13,false);//false prevent scroll
});                  
}    

to only change the background color if a value has been changed you can use the changes object inside afterChange

$('#example1').handsontable('getInstance').addHook('afterChange', function(changes) {
    var ele=this;
    $.each(changes, function (index, element) {
        if(element[2]!=element[3]){    //if the original value is not equal to the actual 
               $(ele.getCell(element[0],ele.propToCol(element[1])))
                    .addClass('changeInput').data("change",true);
        }
    });
});    

http://jsfiddle.net/D4Kx3/10/