How to make Kendo UI grid collapse duplicated rows

Question

I have a Kendo UI grid that can add new rows.

The added row can have the same id as an existing row, I need to remove old rows that exist.

Wrote code for that, but it doesn't work.

function checkSameID(e){
    if(e.type != 'create'){
        return false;
    }
    var grid = $("#grid").data("kendoGrid");
    $.map(e.response, function(row){

        grid.table.find('tbody tr').each(function(){
            var $this = $(this);
            var id = $('td:first-child', $this).html();
            if(id == row.id){
                var uid = $this.data('uid');
                grid.collapseRow(grid.table.find('tr[data-uid="' + uid + '"]'));
            }
        });
    });
}

dataSource.bind("requestEnd", checkSameID);

Where is my problem?

UPDATE

DataSource:

dataSource = new kendo.data.DataSource({
    transport: {
        read:  {
            url: crudServiceBaseUrl,
            dataType: "json",
            type: 'post',
            data:{
                'table':'user','action':'get'}
        },
        update: {
            url: crudServiceBaseUrlSave,
            dataType: "json",
            type: 'POST'
        },
        destroy: {
            url: crudServiceBaseUrlSave,
            dataType: "json",
            type: 'POST',
        },
        create: {
            url: crudServiceBaseUrlSave,
            dataType: "json",
            type: 'POST',
        },
        parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
                return {table:'user',action:operation, models: kendo.stringify(options.models)};
            }

            return {'table':'user','action':'get'};
        }
    },
    success: function(e){
        console.log(e);
    },
    batch: true,
    pageSize: 20,
    schema: {
        model: {
            id: "id",
            fields: {
                id: {
                    editable: false, nullable: true },
                    percent: {
                        type: "number", validation: {
                            required: true}
                    },
                    active: {
                        type: "boolean" },
                        group:{
                            defaultValue: {
                                id:0,name:'Group'},validation: {
                                    required: true }
                        },
                        date:{
                            editable: false, nullable: true },
                            user_name:{
                                editable: false, nullable: true },
            }
        }
    }
});

Answer 1

i think this may help you,

function onSave(e){
    var currentProductName = e.model.ProductName;
    var currentProductID = e.model.ProductID;
    var data = this.dataSource.data();
    for(item in data){
        if(data[item].ProductName == currentProductName &&
           data[item].ProductID != currentProductID){
            e.preventDefault();
            alert("Duplicates found");
             // here you can delete your Duplicates
             // you had to pass ur UID to 'getByUid' function
             // var dataRow = $('#grid').data("kendoGrid").dataSource.getByUid(uid);
             // $('#grid').data("kendoGrid").dataSource.remove(dataRow);
        }

    }
}

then you can proceed with removing the duplicate.

Refer:
1.Checking the Kendo Grid for duplicate values

2.Deleting grid row by UID programmatically

3.Adding And Removing Items In kendo.data.DataSource

Answer 2

I think you should approach this in a different way - you need to prevent the user from creating a new row with a duplicate id and make him edit the correct row instead (using validation), or prevent the user from editing the id at all. Creating and editing data should be clearly separated.