I wanted to select an item in the grid and remove that row manually.
Here is my function associated with a button (not included part of the grid):
//delete the selected row
$("#delete_b").click(function () {
alert('delete clicked');
var grid = $("#grid").data("kendoGrid");
console.log('delete clicked');
grid.select().each(function() {
var dataItem = grid.dataItem($(this));
grid.removeRow(dataItem.BrandID);
});
});
please let me know why this is not working!
Here is my function associated with a button (not included part of the grid):
//delete the selected row
$("#delete_b").click(function () {
alert('delete clicked');
var grid = $("#grid").data("kendoGrid");
console.log('delete clicked');
grid.select().each(function() {
var dataItem = grid.dataItem($(this));
grid.removeRow(dataItem.BrandID);
});
});
please let me know why this is not working!
5 Answers, 1 is accepted
0
Hello Henry,
Atanas Korchev
the Telerik team
The removeRow method needs a jQuery object or a DOM element that represent the table row. You are passing the ID of your data item which is not supported.
Regards,Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Henry
Top achievements
Rank 1
answered on 03 Aug 2012, 02:42 PM
Somehow, I have to call dataSource.remove, after i call grid.removeRow.
I am not sure, why removeRow does not immediately remove the row from the grid, even after passing the entire dobject. The code I use now is given below.
//delete the selected row
$("#delete_b").click(function () {
//alert('delete clicked');
var grid = $("#grid").data("kendoGrid");
console.log('delete clicked');
grid.select().each(function() {
var dataItem = grid.dataItem($(this));
console.log(dataItem);
grid.removeRow($(dataItem)); //just gives alert message
grid.dataSource.remove(dataItem); //removes it actually from the grid
});
I am not sure, why removeRow does not immediately remove the row from the grid, even after passing the entire dobject. The code I use now is given below.
//delete the selected row
$("#delete_b").click(function () {
//alert('delete clicked');
var grid = $("#grid").data("kendoGrid");
console.log('delete clicked');
grid.select().each(function() {
var dataItem = grid.dataItem($(this));
console.log(dataItem);
grid.removeRow($(dataItem)); //just gives alert message
grid.dataSource.remove(dataItem); //removes it actually from the grid
});
0
Accepted
Hello Henry,
Atanas Korchev
the Telerik team
As I said in my previous reply removeRow needs a table row not a data item. The remove method of the datasource needs a dataItem. Change your code to:
grid.removeRow($(this));
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Henry
Top achievements
Rank 1
answered on 03 Aug 2012, 03:09 PM
Excellent. This worked.
Thank you.
Thank you.
0

Hari
Top achievements
Rank 1
answered on 13 Aug 2015, 03:00 PM
I tried all the examples above was not able to resolve it.
It simple
//Column with buttons
columns.Command(command => command.Custom("Remove").Click("removeItem"));
//Get the instance of the gridvar grid = $("#grid").data("kendoGrid");
//Get the selected grid
var tr = $(e.target).closest("tr");
//Get the item from the grid
var data = this.dataItem(tr);
//Remove the item from the datasource
grid.dataSource.remove(data);
//Sync it with the grid
dataSource.sync();