How to empty a datagrid?

[wilfo]

I was adding rows to a datagrid but when i got last index i can't deleted.I am not using ajax only javascript.
sourcode:
$("#btn_remove").click(function(){
        var row = $('#tt').datagrid('getSelected'); 
         $("#tt").datagrid('deleteRow',row.id); //could be $("#tt").datagrid('deleteRow',1);//but not delete the first one
});

//adding row
 $("#btn_add").click(function(){
          cont++;
          $('#tt').datagrid('insertRow',{
                                    index: 0,   // index start with 0
                                    row: {
                                        id: cont,
                                        producto:'Aceite de oliva',
                                        precio:2.7,
                                        cantidad:5,
                                        total:13.5
                                    }
                                });
      });

Please help , i need delete each selected row.

[stworthy]

The 'deleteRow' method require a 'index' parameter that represent the row index. Please pass a correct parameter value while calling this method. The example below shows how to delete all selected rows.

Code:

var rows = $('#tt').datagrid('getSelections');  // get all selected rows
for(var i=0; i<rows.length; i++){
	var index = $('#tt').datagrid('getRowIndex',rows[i].id);  // get the row index
	$('#tt').datagrid('deleteRow',index);
}

[ejzhang]

load a empty dataset

Code:

$('#dg').datagrid('loadData', {"total":0,"rows":[]});

[skellenb]

The 'deleteRow' method require a 'index' parameter that represent the row index. Please pass a correct parameter value while calling this method. The example below shows how to delete all selected rows.

Code:

var rows = $('#tt').datagrid('getSelections');  // get all selected rows
for(var i=0; i<rows.length; i++){
	var index = $('#tt').datagrid('getRowIndex',rows[i].id);  // get the row index
	$('#tt').datagrid('deleteRow',index);
}

this doesn't work for me... when first row was removed, the index doesn't correspond to the selected rows...

For Example: When you have selected 4 rows (1,2,3,4) and you remove row 1 (index 0) so row 2 becomes now row 1 (index 0) and so on...
For that Reason i push every index first in an array... then sort it and reverse it so that the first index to be removed is the last...
then all lower indexes remain unchanged until you remove it...

so i had to modify it like this below:

Code:

var rows = $('#tt').datagrid('getSelections');  // get all selected rows
var ids = [];
for(var i=0; i<rows.length; i++){
	var index = $('#tt').datagrid('getRowIndex',rows[i]);  // get the row index
	ids.push(index);
}
ids.sort();  // sort index
ids.reverse();  // sort reverse
for(var i=0; i<ids.length; i++){
	$('#tt').datagrid('deleteRow',ids[i]);
}

[Ellipsis]

I tried the same methods on a combogrid,

first I call

Code:

$('#cc').combogrid('clear'); // the label and value are cleared OK

The I start:

Code:

var rows = $('#cc').combogrid('grid').datagrid('getRows');  // get all rows
for(var i=0; i<rows.length; i++){
	var index = $('#cc).combogrid('grid').datagrid('getRowIndex',rows[i].id);  // get the row index
	$('#cc').combogrid('grid').datagrid('deleteRow',index);
}

The datagrid is not cleared

[Kevin]

@skellenb

There is an easier way (and quicker )

var rows = $('#tt').datagrid('getSelections');  // get all selected rows
for(var i=rows.length-1; i>= 0; i--){
   var index = $('#tt').datagrid('getRowIndex',rows.id);  // get the row index
   $('#tt').datagrid('deleteRow',index);
}