Canceling popup editor removes row in grid

7 posts, 1 answers
  1. Answer
    Lars Lykke
    Lars Lykke avatar
    7 posts
    Member since:
    Oct 2010

    Posted 13 Mar 2013 Link to this post

    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?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 15 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Lars Lykke
    Lars Lykke avatar
    7 posts
    Member since:
    Oct 2010

    Posted 18 Mar 2013 Link to this post

    Thank you very much, it worked like a charm!
  5. Chrys
    Chrys avatar
    45 posts
    Member since:
    Feb 2013

    Posted 26 Jun 2013 Link to this post

    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.
  6. Jackie
    Jackie avatar
    5 posts
    Member since:
    Jun 2012

    Posted 08 Nov Link to this post

    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);
                }
            }
        });

  7. Jackie
    Jackie avatar
    5 posts
    Member since:
    Jun 2012

    Posted 08 Nov Link to this post

    Hi,

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

  8. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 10 Nov Link to this post

    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
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top
Kendo UI is VS 2017 Ready