Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

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

1 Answer 391 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Joel asked on 24 Jul 2015, 05:37 PM

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>

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 28 Jul 2015, 12:49 PM

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!
 
Tags
Grid
Asked by
Joel
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or