Remove row from Kendo UI Grid with jQuery

Question

I am using a Kendo UI grid and for deleting a row I am using a custom button with bootstrap that when I click on it, with ajax I call a web api method to remove that row and if it is successfully deleted that row removes it from the DOM. (I'm not using the command destroy of kendo)

The problem I have is that if I try to filter that row that was removed, it appears again in the grid and it seems that it was not removed at all.

This is my Kendo UI grid:

var table = $("#grid").kendoGrid({                
    dataSource: {
        transport: {
            read: {
                url: "/api/customers",
                dataType: "json"
            }
        },
        pageSize: 10
    },               
    height: 550,
    filterable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [{
        template: "<a href='' class='btn-link glyphicon glyphicon-remove js-delete' title='Delete' data-customer-id= #: Id #></a>",
        field: "Id",
        title: "&nbsp;",
        filterable: false,
        sortable: false,
        width: 50,
        attributes: {
            style: "text-align: center" 
        }
    }, {
        field: "Name",
        title: "Name",
        width: 100,
    }, {
        field: "LastName",
        title: "LastName",
        width: 100,
    }, {
        field: "Email",
        title: "Email",
        width: 150
    }]
});

And this is my jQuery code for deleting a row:

$("#grid").on("click", ".js-delete", function () {
     var button = $(this);
     if (confirm("Are you sure you want to delete this customer?")) {
         $.ajax({
             url: "/api/customers/" + button.attr("data-customer-id"),
             method: "DELETE",
             success: function () {
                 button.parents("tr").remove();  //This part is removing the row but when i filtered it still there.
             }
         });
     }
 });

I know that in jQuery DataTables when can do something like this:

 table.row(button.parents("tr")).remove().draw();

How can i do something like this with Kendo UI using jQuery?

Answer 1

Don't ever play with a Kendo's widget DOM. Always use it's methods instead.

Using Grid's removeRow() :

$("#grid").on("click", "button.remove", function() {
    var $tr = $(this).closest("tr"),
        grid = $("#grid").data("kendoGrid");

    grid.removeRow($tr);
});

Demo

---

Using DataSource's remove() :

$("#grid").on("click", "button.remove", function() {
    var $tr = $(this).closest("tr"),
        grid = $("#grid").data("kendoGrid"),
        dataItem = grid.dataItem($tr);

    grid.dataSource.remove(dataItem);
});

Demo

Answer 2

My usage was a little different. I have a custom delete button, so I needed to delete by ID , not UID . You should be able to match on any field value instead of ID.

var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataSource.get(ID);
var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']");
grid.removeRow(row);

We were trying to prevent messing with the controller, and this calls the existing delete function.

Answer 3

The removed row will be present in the kendo ui till you push changes to server. To remove the row entirely you need to use grid.saveChanges()

So the code below will remove row from server as well from ui

const row = $(e.target).closest('tr')[0];
const grid = $(e.target).closest('#grid').data("kendoGrid");
grid.removeRow(row);
grid.saveChanges() //comment out if you need to remove only from ui