How do I remove a row from a Kendo Grid

Question

I have a very simple setup, a grid called #list with a datasource populated with records to display.

I have a button on each row with an onClick event that calls thi

Answer 1

below code show how to delete rows using custom delete command.

  $("#grid").kendoGrid({
        columns: [
            {
                command: [{ name: "edit" }, {
                    name: "Delete", imageClass: "k-icon k-i-close", click: function (e) {
                        e.preventDefault();
                        var dataItem = this.dataItem($(e.target).closest("tr"));
                        if (confirm('Do you really want to delete this record?')) {
                            var dataSource = $("#grid").data("kendoGrid").dataSource;
                            dataSource.remove(dataItem);
                            dataSource.sync();
                        }
                    }
                }], title: " ", width: "200px"
            }
        ]
    });

Hope this may help

Answer 2

The grid already supports create, update and deleting of records. You should not try to implement it on your own.

You need to define destroy on your datasource like here

transport: {
    read:  {
             url: crudServiceBaseUrl + "/Products",
    },
    destroy: {
               url: crudServiceBaseUrl + "/Products/Destroy",
    }
}

Also you can turn on a delete confirmation

    editable: {
     confirmation: "Are you sure that you want to delete this record?"
   }

EDIT: In order to conditionally show delete buttons you can hook up the DataBound-Event of the grid. You also need some indication wheter or not to show the button. I used a property called HideButton in my example. Maybe you have to adjust the class .k-grid-delete the rest should work.

$("#grid").kendoGrid({
         ... other configuration ...
         dataBound: onDataBound
});

function onDataBound(e) {
        var grid = this;
        var ds = grid.dataSource;
        var max = ds.data().length;
        for (var i = 0; i < max; i++) {
            var currentUid = ds.at([i]).uid;
            var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
            if (ds.at(i).HideButton) {
                var editButton = $(currentRow).find(".k-grid-delete");
                editButton.hide();
            }
        }
    }