Not able to delete rows using HandsOnTable

Question

I am not able to remove rows with the latest version. I am using version 0.9.9.

This is what I do:

var $container = $("#add-table");
$container.handsontable(options);

var handsontable = $container.data('handsontable');
var data = handsontable.getData();
if(data.length > 1 && handsontable.isEmptyRow(data.length-1)) {
    handsontable.alter('remove_row', parseInt(data.length-1));
}

There was a similar question on Handsontable delete multiple rows but that does not solve my purpose. The fiddle on this link does not work with the solution provided.

Any help would be appreciated.

Answer 1

As it currently stands, getSelected() returns nothing...

getSelected: function () { 
     //https://github.com/warpech/jquery-handsontable/issues/44 
     //cjl if (selection.isSelected()) { 
     //return [priv.selStart.row(), priv.selStart.col(), priv.selEnd.row(), priv.selEnd.col()]; 
     //} 
     }

which is a huge problem since handsontable references that function quite a bit. However, we can fortunately use the afterSelectionEnd event.

afterSelectionEnd (r: Number, c: Number, r2: Number, c2: Number)
Callback fired after one or more cells are selected (on mouse up).

Parameters:
r selection start row
c selection start column
r2 selection end row
c2 selection end column

According to the API,

alter ('remove_row', index: Number, amount: Number (Optional), source: String (Optional))

Remove the row(s) at given index. Default amount equals 1

This means in order to use alter('remove_row'), we only need to provide the index.

---

Here is a working demo I made to get the desired result.

NOTE:

Due to a bug, we need to add some logic in the afterSelectionEnd event.

JAVASCRIPT:

var myData = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
    ];

//declare row vars
var row1 = null,
    row2 = null;

var $container = $("#exampleGrid");

$container.handsontable({
    data: myData,
    startRows: 5,
    startCols: 5,
    minSpareCols: 0,
    minSpareRows: 0,
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true,
    afterSelectionEnd: function(x1, y1, x2, y2){

        //add this because of bug
          if( (x1 <= x2 && y1 < y2) || (x1 < x2 && y1 <= y2) || (x1 == x2 && y1 == y2)) {
            row1 = x1;
            if(x1 == 0)
                row2 = parseInt(x2 + 1);
              else
                row2 = x2;
        }
        else if( (x1 >= x2 && y1 > y2) || (x1 > x2 && y1 >= y2)) {
            row1 = x2;
            if(x2 == 0)
                row2 = parseInt(x1 + 1);
              else
                row2 = x1;
        }
        else if(x1 < x2 && y1 > y2) {
            row1 = x1;
            row2 = x2;
        }
        else if(x1 > x2 && y1 < y2) {
            row1 = x2;
            row2 = x1;
        }
    }
});

//gets instance of handsontable
    var instance = $container.handsontable('getInstance');

$('#delete').click(function(){
    if(row1 != null){
        if(row2 != null || row2 != row1 ){
            instance.alter('remove_row', row1, row2);
        }
        else{
            instance.alter('remove_row', row1);
        }
        row1 = null;
        row2 = null;
    }else{
        alert('Please select a cell...');   
    }
});

Hope this helps and let me know if you need anything else!