How to determine index of an item being dropped client side

[Alice]

We have just started with a trial of Telerik tools for a new drag and drop playlist we will be implementing into our solution. We are tracking the movement and sorting of each item by its value, parent value and id and we will be tracking any changes in an array and then on save we will be using those references to build new playlists.

 

The issue we are running into is getting the current index of the node when dropped on client side. We have used the OnClientNodeDropping but it doesnt seem to return the id of the item after it is dropped. Is there a different way we should be going about getting this? 

 

 

[Ivan Danchev]

Hello,

You can get the index of the source node (the node you are dragging and dropping) and the destination node (the node you drop onto) with the get_index() client side method. In a similar fashion using the corresponding methods (get_text(), get_value(), etc.) you can get the other properties of the source or destination item:

function OnClientNodeDropping(sender, args) {
    var sourceItem = args.get_sourceNode();
    var sourceIndex = sourceItem.get_index();

    var destItem = args.get_sourceNode();
    var destIndex = destItem.get_index();
}

As for getting the item's ID, there is no client-side method that would allow you to get it as it is used internally for building the hierarchy (parent nodes -> child nodes). A possible workaround would be to add the id as a custom attribute to each item and you will be able to access it through the item's attributes collection.
 
Regards,
Ivan Danchev
Telerik

[Alice]

I need the new index of the item being dropped, not the node it is being dropped on's index. Is there anyway to get that? 

[Ivan Danchev]

Hello,

The dropped node's new index will correspond to the number of child nodes the destination node contains, unless you are reordering the nodes after dropping.
For example, if you drop node X on node Y and node Y does not have any child items the index of X will be 0. If node Y has 3 child nodes the index of X will be 3. You can get the child nodes count in the OnClientNodeDropping handler the following way:

function OnClientNodeDropping(sender, args) {
    var destItem = args.get_destNode();
    var childrenCount = destItem.get_allNodes().length;
}

In the example above the value of "childrenCount" will correspond to the new node's index.

Regards,
Ivan Danchev
Telerik