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,
- Add one new item.
- Click Save.
- Add one new item.
- Click Save.
- Click Cancel.
- 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
>
<
link
rel
=
"stylesheet"
href
=
"http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-office365.min.css"
/>
<
link
rel
=
"stylesheet"
href
=
"http://cdn.kendostatic.com/2015.2.624/styles/kendo.office365.min.css"
/>
<
script
src
=
"http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"
></
script
>
</
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
>