Delete multiple rows remotely

Question

I am new to Handsontable. I am trying to delete several selected rows of a table using the getSelected methods and change "(remove_row). However, with my code below I get a" selection "error not defined in Firebug, and" Uncaught TypeError: cannot read property "0" from undefined "in Chrome: It doesn't matter which row I select or how many. I still get an error message and no rows are deleted. What am I doing wrong?

$(document).ready(function () { var myData = [ ["", "Kia", "Nissan", "Toyota", "Honda"], ["2008", 10, 11, 12, 13], ["2009", 20, 11, 14, 13], ["2010", 30, 15, 12, 13] ]; $("#exampleGrid").handsontable({ data: myData, startRows: 5, startCols: 5, //minSpareCols: 1, //always keep at least 1 spare row at the right //minSpareRows: 1, //always keep at least 1 spare row at the bottom, rowHeaders: true, colHeaders: true, contextMenu: true, currentRowClassName: 'currentRow', currentColClassName: 'currentCol' }); $edit = $('#exampleGrid'); function editRows() { $('#addtop').on('click', function () { $edit.handsontable('alter', 'insert_row', 0); }); $('#addbottom').on('click', function () { $edit.handsontable('alter', 'insert_row'); }); var selection = $edit.handsontable('getSelected'); $('.deletebutton').on('click', function () { $edit.handsontable('alter', 'remove_row', selection[0], selection[2]); }); } editRows(); }); 

Here is my fiddle http://jsfiddle.net/EfhqJ/48/ .

Thanks.

Answer 1

your select variable is not visible within the onClick handler.

Try moving "var selection = ..." to the handler function. Something like...

  $('.deletebutton').on('click', function () { var selection = $edit.handsontable('getSelected'); $edit.handsontable('alter', 'remove_row', selection[0], selection[2]); }); 

Answer 2

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 because there are very few handy links that function. However, fortunately, we can use the afterSelectionEnd event .

afterSelectionEnd (r: Number, c: Number, r2: Number, c2: Number)
The callback is launched after selecting one or more cells (with the mouse up).

Options:
r start line of choice
c start column
r2 finite row of choice
c2 leaf selection column

According to the API ,

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

Delete rows (rows) at the given index. The default value is 1.

This means that to use alter('remove_row') we only need to specify an index.

---

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

Note:

Due to an error , we need to add some logic to 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!

Answer 3

you just need to add outsideClickDeselects: false to your constructor options, after which you will get the correct getSelected () result.

and here is a live demo http://jsfiddle.net/czz82kL5/2/