Kendo UI Grid Reorderable Rows 没有从下往上正确地重新排序

Question

I have added the reorderable rows to true and when reordering by dragging and dropping a row, it doesn't work properly. If I was to move Room 4 and drop it above the 1st row, it doesn't go there, sometimes other rows will go where I drop them but not always.

Here is a link to the demo Reorder Row Drag and Drop

any idea's on why its not working properly?

 $(document).ready(() => { LoadRoomsGrid(); }); function LoadRoomsGrid() { $("#RoomsGrid").empty(); $("#RoomsGrid").kendoGrid({ dataSource: { data: roomData }, dataBound: (e) => { }, schema: { model: { id: "RoomID", fields: { RoomID: { editable: false, hidden: true }, roomName: { editable: true, type: "string", hidden: false } } } }, columns: [{ field: "RoomID", title: "RoomID", hidden: true }, { field: "RoomName", title: "Rooms" } ], noRecords: { template: "No Rooms" }, reorderable: { rows: true }, change: function(e) {} }); } const roomData = [{ RoomID: 1, RoomName: "Room 1" }, { RoomID: 2, RoomName: "Room 2" }, { RoomID: 3, RoomName: "Room 3" }, { RoomID: 4, RoomName: "Room 4" } ]

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-ocean-blue.min.css"> <div id="RoomsGrid"></div>

Answer 1

It would appear that each item in the datasource must have a unique 'id' property for row reordering to work, even though that is not explicitly stated in the documentation.