UI.Sortable: Default position/index when receiving a UI.Draggable

UI.Sortable: Default position/index when receiving a UI.Draggable

Description:

I have two Infragistics DataGrids, one is UI.Sortable and accepts rows from the second Grid which is UI.Draggable.

I use the receive Event to get the dropped, new rows position/index inside of the grid to perform a server-request to re-order the rows in the database accordingly.

It all works great, as long as I drop rows between the existing rows in the first grid. When I drop a row further down in the grid (the grid itself consists of multiple HTML table elements and a containing div tag), the row is dropped to the end of the grid (which is the desired behaviour), but the index/position that I get is always '1'.

Code:

var newItem; $("#tbl2 tr").draggable({ connectToSortable: "#tbl", helper: 'clone' }); $("#tbl").sortable({ revert: true, items: "tr", beforeStop: function (event, ui) { newItem = ui.item; }, receive: function (event, ui) { $newOrder = $(newItem).parent().children().index(newItem); alert($newOrder); } }).disableSelection();

Demo (Simplified, I use tables instead of WebDataGrid and put a div around the first table to reproduce the same behaviour)

http://jsfiddle.net/4gLxH/10/