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/

you can select the row with the index of th [http://jsfiddle.net/D4Kx3/6/](http://jsfiddle.net/D4Kx3/6/) — Abraham Uribe, Oct 22 '13 at 18:40
@AbrahamUribe Thanks again. You are a genius, and a huge help. — triplethreat77, Oct 22 '13 at 18:59
@AbrahamUribe Is it possible to put an image inside the table (not headers)? The cell types are numeric, date, checkbox, etc but can these images be appended maybe? http://jsfiddle.net/D4Kx3/7/ — triplethreat77, Oct 22 '13 at 19:19
This would be to select a row, rather than column - like in Excel. — triplethreat77, Oct 22 '13 at 19:29
something like this but the table scrolls, the selection seems out of place and the arrow don't show i have to add a letter to click the span [http://jsfiddle.net/D4Kx3/8/](http://jsfiddle.net/D4Kx3/8/) — Abraham Uribe, Oct 22 '13 at 20:56
you have to change the css to prevent displacement on the selected border and add false on the selectCell[http://jsfiddle.net/D4Kx3/9/](http://jsfiddle.net/D4Kx3/9/) — Abraham Uribe, Oct 22 '13 at 21:54
Almost exact. Remember when you click to change the fields and they turn yellow? This happens for each double click. I want the fields to turn yellow only if a value has been changed, and not an accidental double click (or click of a row select arrow). Thanks again, this is working out beautifully. — triplethreat77, Oct 23 '13 at 13:51

score 1 · Accepted Answer · answered Oct 23 '13 at 14:35

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/

I noticed a small error. When checking the checkboxes, they change yellow, just like the inputs. The checkboxes should be the exception. Also, when checking a checkbox, can you have that entire row select? Thanks. — triplethreat77, Oct 25 '13 at 14:05
Ah, one more thing. Checked rows should remain selected, when checking a new one only that row is selecting. In that aspect, checking all for the checkboxes in the header should check all checkboxes and select all rows. — triplethreat77, Oct 25 '13 at 15:30
The row should only be selected if the checkbox is checked. If you uncheck the checkbox, the row is still selected. — triplethreat77, Oct 25 '13 at 15:31
[http://jsfiddle.net/D4Kx3/18/](http://jsfiddle.net/D4Kx3/18/) to select all rows you need to implement something like this and change selectCell to select multiple rows — Abraham Uribe, Oct 25 '13 at 17:40
The example above doesn't seem to implement selecting more than one row, or having the rows select/deselect according to checkbox. The only change I see is the 'check all' checkbox is missing styling. — triplethreat77, Oct 25 '13 at 17:43
check the update [http://jsfiddle.net/D4Kx3/19/](http://jsfiddle.net/D4Kx3/19/) it fix some bugs with checkall and the other checkbox but for the multiple select you need to change the values on the selectCell — Abraham Uribe, Oct 25 '13 at 17:50

Select entire Handsontable column with icon click?

1 Answers1