I have a problem with grid, where I'm using sortable widget and virtual scrolling (for infinity scrolling). Actually problem happens when you start dragging one of elements, then scrolling and after that do mouse-up. Result of these manipulation you can see here - http://prntscr.com/7kvtn6. Item, which I drugged, can't find its place.
var data = [
{'Id': 1, 'FirstName': 'John_1'},
{'Id': 2, 'FirstName': 'John_2'},
{'Id': 3, 'FirstName': 'John_3'},
{'Id': 4, 'FirstName': 'John_4'},
{'Id': 5, 'FirstName': 'John_5'},
{'Id': 6, 'FirstName': 'John_6'},
{'Id': 7, 'FirstName': 'John_7'},
{'Id': 8, 'FirstName': 'John_8'},
{'Id': 9, 'FirstName': 'John_9'},
{'Id': 10, 'FirstName': 'John_10'}];
var grid = $('.js-reorder').kendoGrid({
dataSource: {
data: data,
pageSize: 4,
serverSorting: true,
serverPaging: true
},
height: 125,
scrollable: {
virtual: true
},
columns: [
{ field: "Id", title: "ID", width: "110px" },
{ field: "FirstName", title: "First Name", width: "130px" }
]
});
grid.find('.k-grid-content').find('tbody').kendoSortable({
cursor: 'move'
});
Actually I found reason. When you start dragging item, kendo create placeholder for it, and when you move this item, kendo move placeholder too. But when you scrolling, kendo load new items in grid and replace all already existed elements in table including placeholder. So when you mouse-up, kendo can't find placeholder for item and insert it just in current mouse position and we have what we have.
Could smb help to avoid this behavior?
Example here - http://jsfiddle.net/eu20k7zg/5/