Canceling popup editor removes row in grid

[Lars Lykke]

I saw some similar posts, but this issue still happens to me.
I have added id, and I think it should work.

Demo here:

http://jsfiddle.net/5nJPH/36/

to reproduce:

1. click edit button
2. click cancel
3. observe row disappear from grid.

I tried using datasource like this:

$('#grid').kendoGrid({

                dataSource:
                    {
                        data: dataSourceSelectedItems.data(),

                    },
                schema:
                    {
                        model: {
                            id: "Id"
                        }
                    }

and it seems to take care of the row-removed issue, but puts the row in a weird state where update button no longer works.

Help?

[Iliana Dyankova]

Hi Lars,

In order to implement CRUD operations using local data and avoid the problem with disappearing records I recommend you using custom transport functions. Also, you should sync() the dataSource after adding the items. For your convenience I updated the jsFiddle example.  
  
Regards,
Iliana Nikolova
the Telerik team

[Lars Lykke]

Thank you very much, it worked like a charm!

[Chrys]

As a side note you may want to make sure that when you are getting data for an edit that what you specified in in .Model(model =>
            {
                model.Id(currentAccount => currentAccount.UserID);
}
has a value or the same problem will occur. My problem on my edit was that the objects I was handing it didn't have the UserID values set for the objects I wanted to edit. So the grid thought I was adding things not editing.

[Jackie]

Hi,

I got the same problem here. After I click Cancel button, the top record disappears.

My code is posted below, please advise. Thanks.

 

var dataSource = new kendo.data.DataSource({
        pageSize: 18,
        transport: {
            read: function (options) {
                $.ajax({
                    url: baseUri + "/GetCommodities",
                    dataType: "json",
                    success: function (result) {
                        options.success(result);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        options.error(jqXHR);
                    }
                });
            },
            create: function (options) {
                if (options.data) {
                    options.data.CommodityId = 0;
                    options.data.MaxPrice = parseFloat(options.data.MaxPrice);
                    options.data.MaxTonnage = parseFloat(options.data.MaxTonnage);

                    $.ajax({
                        url: baseUri + "/SaveCommodity",
                        dataType: "json",
                        data: options.data,
                        type: "Post",
                        success: function (result) {
                            if (result === false) {
                                alert("Error in adding the record.");
                            }
                            options.success(result);
                            $("#adminGrid").data("kendoGrid").dataSource.read();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.log("Add: " + errorThrown + "-" + jqXHR.responseText);
                            alert("Failed inserting the new record: " + jqXHR.responseText);
                            options.error(jqXHR);
                        }
                    });
                }
            },
            update: function (options) {
                if (options.data) {

                    options.data.MaxPrice = parseFloat(options.data.MaxPrice);
                    options.data.MaxTonnage = parseFloat(options.data.MaxTonnage);

                    $.ajax({
                        url: baseUri + "/SaveCommodity",
                        dataType: "json",
                        data: options.data,
                        type: "Post",
                        success: function (result) {
                            if (result === false) {
                                alert("Error in updating the record.");
                            }
                            options.success();
                            $("#adminGrid").data("kendoGrid").dataSource.read();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.log("Save: " + errorThrown + "-" + jqXHR.responseText);
                            alert("Failed updating the new record: " + jqXHR.responseText);
                            options.error(jqXHR);
                        }
                    });
                }
            }
        },
        schema: {
            model: {
                id: "CommodityId",
                fields: {
                    Commodity: { 
                        editable: false
                    },
                    MaxPrice: {
                        type: "decimal", validation: { required: true }
                    },
                    MaxTonnage: {
                        type: "decimal", validation: { required: true }
                    }
                }
            }
        },
        error: function (e) {
            if (e && e.errors) {
                console.log("DataSource: " + e.errors);
            }
        }
    });

[Jackie]

Hi,

I got the same problem here. After I click Cancel button, the top record disappears. What caused this?

[Boyan Dimitrov]

Hello Jackie,

Most probably the top record disappears because it is not synced with the server. If there are some changes not synced with the server they will be reset as soon as the cancel button is clicked.

Could you please explain what is the exact response you are retrieving from the create method on the server? Based on the provided code for the transport.create could you please provide the content of the result variable: 

create: function (options) {
                if (options.data) {
                    options.data.CommodityId = 0;
                    options.data.MaxPrice = parseFloat(options.data.MaxPrice);
                    options.data.MaxTonnage = parseFloat(options.data.MaxTonnage);

                    $.ajax({
                        url: baseUri + "/SaveCommodity",
                        dataType: "json",
                        data: options.data,
                        type: "Post",
                        success: function (result) {
                            if (result === false) {
                                alert("Error in adding the record.");
                            }
                            options.success(result);
                            $("#adminGrid").data("kendoGrid").dataSource.read();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.log("Add: " + errorThrown + "-" + jqXHR.responseText);
                            alert("Failed inserting the new record: " + jqXHR.responseText);
                            options.error(jqXHR);
                        }
                    });
                }
            },

Regards,
Boyan Dimitrov
Telerik by Progress