Reloading kendo ui grid the row item code executes

Question

I've a web application with kendo ui grid. The grid is load with Bakbone.js when I click a button and I can remove a row with the next code:

$(document).on("click", "#grid tbody tr .ob-delete", function (e) {
    var item = grid.dataItem($(this).closest("tr"));
    var check = confirm("Do I delete:" + item.City );
    if (check) {
        grid.removeRow($(this).closest("tr"));
    }
});

The cofiguration of the button to delete:

 command: [
            "edit", {
            name: "destroy",
            text: "Remove",
            className: "ob-delete"
        }]

When I reload the content (grid) pushing the button, if I want to delete a row, item.City produce an error.

The complete example here

Edited: Solved here! Thanks to @Whizkid747!

To add in

command: [ "edit",{ 
      //...
      click: deleteRow
}] 

Then, when button is clicked a function is called:

function deleteRow(e){
        var item = this.dataItem($(e.currentTarget).closest("tr"));
         var check = confirm("Do I delete:" + item.City );
        if (check) {
            grid.removeRow($(e.currentTarget).closest("tr"));
        }
    } 

Answer 1

Not sure, but your grid is actually not the same grid but the old (before the reload) one and second grid is created.

Following line changed:

var item = $('#grid').data().kendoGrid.dataItem($(this).closest("tr"));

updated version.

I suggest you to just change the data through the dataSource.data() method instead of recreating the Grid. Or change your logic so you actually destroy the widget before recreating it.