Add new item, save, x2, then Cancel causes duplicate row.

2 posts, 0 answers
  1. Joel
    Joel avatar
    5 posts
    Member since:
    Nov 2012

    Posted 24 Jul 2015 Link to this post

    I've created a snippet here: http://dojo.telerik.com/@jpenner/IMoWa

    It's based on the Kendo UI grid demo for local data-binding. The difference is that I've replaced the dataSource's populated data array with an empty array.

    When running this,

    1. Add one new item.
    2. Click Save.
    3. Add one new item.
    4. Click Save.
    5. Click Cancel.
    6. Watch as the first item is duplicated and you now have three rows.

    You can even repeat and/or edit some of the rows and then click Cancel and it will duplicate even more. Do this enough times and you'll end up with 9960 rows in the grid. Please help! I've got a client complaining about this issue.

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
     
    </head>
    <body>
      <h1>Bug</h1>
        <ol>
        <li>Click "Add new record".</li>
        <li>Type in a product name.</li>
        <li>Click "Save Changes".</li>
        <li>Repeat steps 1-3 once more. This is important.</li>
        <li>After step 4, click "Cancel".</li>
        <li>Notice that you have three items instead of two.</li>
      </ol>
            <div id="example">
                <div id="grid"></div>
     
                <script>
                    $(document).ready(function() {
                        $("#grid").kendoGrid({
                            toolbar: ['create','save','cancel'],
                            editable: true,
                            dataSource: {
                                data: [],
                                schema: {
                                    model: {
                                        fields: {
                                            ProductName: { type: "string" },
                                            UnitPrice: { type: "number" },
                                            UnitsInStock: { type: "number" },
                                            Discontinued: { type: "boolean" }
                                        }
                                    }
                                },
                                pageSize: 20
                            },
                            height: 550,
                            scrollable: true,
                            sortable: true,
                            filterable: true,
                            pageable: {
                                input: true,
                                numeric: false
                            },
                            columns: [
                                "ProductName",
                                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                                { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                                { field: "Discontinued", width: "130px" }
                            ]
                        });
                    });
                </script>
     
    </div>
     
     
    </body>
    </html>

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 28 Jul 2015 Link to this post

    Hello Joel,

     

    This behavior is caused by the fact there is no transport defined in the data source configuration. Save changes will sync the data with the server, but there is no create option defined. 

     

    In this case custom transport to work with local data should be defined as shown in Complete example: Local CRUD Operations with the Kendo UI Grid example. 

     

    Please refer to modified http://dojo.telerik.com/OMUFo example. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    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
Back to Top