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.

Then you're not actually removing any rows. Set the `minSpareRows: 0` and `minSpareCols: 0` in the handsontable options if you don't want the extra rows and columns displayed. — Dustin Kingen, Jul 06 '13 at 16:21
Check out this [fiddle](http://jsfiddle.net/5xCqN/1/). You can change those options to see the effect. — Dustin Kingen, Jul 06 '13 at 16:24
What I am trying to do is, I have set the `minsSpareRows` to 1 and while I fill in data, the rows are added. Now, before submitting the table, I don't want any errors. So, I try to remove the last row and validate the form. Since, the last row is empty, I will always get validation errors. And I am not able to remove the last row because of this issue. — automaticAllDramatic, Jul 06 '13 at 16:26
Check this fiddle - http://jsfiddle.net/rizwaniqbal/v967j/1/ — automaticAllDramatic, Jul 06 '13 at 16:38
See if http://jsfiddle.net/v967j/2/ works for you. I couldn't get the `getSelected` function to work so that might be a bug with the library. — Dustin Kingen, Jul 06 '13 at 17:10

score 3 · Accepted Answer · edited Feb 18 '14 at 18:34

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!

score 1 · Answer 2 · answered Jul 10 '13 at 02:04

So i am guessing you want to delete an empty last row ?

Make sure you have not set minSpareRows to a value more than 0(default) . If the minSpareRows is more than zero u cannot delete the extra row using alter('remove_row').

i used this data to simulate the empty last row :

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

Checkout the example .When u click on del link it deletes the empty last row . Hope this helps you

Working Example

Not able to delete rows using HandsOnTable

2 Answers2