How to remove a kendo ui grid row based upon a column value

Question

On an asp.net mvc view, I have a Kendo UI treeview and a Kendo UI grid. Each checkbox in the treeview has the same id value in the ID column of the grid. Whenever I uncheck a checkbox in treeview I want to delete the corresponding row in the grid which has this id value. ID is one of the columns in the grid. The following is my code:

The following function is executed by the uncheck action on the treeview

function onCheck() {
                var checkedNodes = [],
                    treeView = $("#treeview").data("kendoTreeView"),

                var myNodes = treeView.dataSource.view();

                for (var i = 0; i < myNodes.length; i++) {
                    var children = myNodes[i].children.view();
                    if (children) {
                        for (var j = 0; j < children.length; j++) {

                            if ((typeof children[j].checked !== undefined)  && (!children[j].checked)) {
                                alert("You unchecked " + children[j].id); //This shows the correct id value
                                var dataItem = $("#grid").data("kendoGrid").dataSource.get(children[j].id);
                                $("#grid").data("kendoGrid").dataSource.remove(dataItem);
                            }
                        }
                    }
                }

The following is the code for grid:

      $("#grid").kendoGrid({
        pageable:true,
        dataSource: dataSource, //comes as json from a url
        schema: {
            model: {
                id: "ID"
            }
        },
        pageSize:3,


        columns: [
            {
                hidden: true,
                field: "ID"

            },
            {
                field: "MyFileName"
             },
      });

When I debugged, the dataItem in var dataItem = $("#grid").data("kendoGrid").dataSource.get(children[j].id); comes as undefined. However the id the treeview retrieved and the id in the grid matched. This is the error I see: 0x800a138f - JavaScript runtime error: Unable to get property 'uid' of undefined or null reference

Obviously no grid row is deleted.

Thanks

Answer 1

Try this on your checkbox's change event:

var id = treeView.dataItem(this.closest("li")).id;
var gridDataItem = grid.dataSource.data().filter(function(item) {
    return item.id == id;
})[0];

grid.removeRow('tr[data-uid="' + gridDataItem.uid + '"]');

The filter method will find the related row in the grid by the current id . Use grid's removeRow() insted of removing directly from dataSource.

Demo