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

dataSource.get is relying on the model... can you provide all relevant code? (Grid and TreeView definition) — The_Black_Smurf

DontVoteMeDown DontVoteMeDown · Accepted Answer · 2016-02-22T21:10:00

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

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

1 Answers