This is a migrated thread and some comments may be shown as answers.

How I can retrieve ID attribute of tree element on drop event

1 Answer 179 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
designteam
Top achievements
Rank 1
designteam asked on 18 Mar 2014, 03:08 PM
Hi

Could you please help me out to retrieve the ID attribute of tree elements on drop event

Basically I need the 'ID' attribute of dropped elements i.e source and target element


<div id="treeview"></div>

<script>
function onDrop(e) {
    // here I need the 'ID' attribute of dropped source and target element
    // alert(this.text(e.dropTarget));
},

$("#treeview").kendoTreeView({
    checkboxes: {
        checkChildren: true
    },
    dataSource: [{id:1,text:"root",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:27,text:"",expanded: true, spriteCssClass: "folder"},{id:28,text:"test6",expanded: true, spriteCssClass: "folder"},{id:29,text:"2233",expanded: true, spriteCssClass: "folder"},{id:30,text:"rajnew",expanded: true, spriteCssClass: "folder"},{id:31,text:"dgfdgfdgfd",expanded: true, spriteCssClass: "folder"},{id:32,text:"dgfdgfdgfd",expanded: true, spriteCssClass: "folder"},{id:33,text:"dgfdgfdgfd",expanded: true, spriteCssClass: "folder"},{id:34,text:"dgfdgfdgfd",expanded: true, spriteCssClass: "folder"},{id:35,text:"rooot",expanded: true, spriteCssClass: "folder"},{id:36,text:"gururajnew",expanded: true, spriteCssClass: "folder",checked:"true"},{id:37,text:"new star",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:38,text:"tr4estsfdf",expanded: true, spriteCssClass: "folder",checked:"true"}]},{id:39,text:"test 8",expanded: true, spriteCssClass: "folder",checked:"true"},{id:2,text:"A particular hotel",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:5,text:"test",expanded: true, spriteCssClass: "folder",checked:"true"}]},{id:3,text:"Another hotel",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:20,text:"MPT Test",expanded: true, spriteCssClass: "folder"},{id:7,text:"Third down",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:9,text:"Fourth down a 1",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:11,text:"Fifth down",expanded: true, spriteCssClass: "folder",checked:"true"}]}]},{id:8,text:"Another third down",expanded: true, spriteCssClass: "folder",checked:"true",items:[{id:10,text:"Fourth down b1",expanded: true, spriteCssClass: "folder",checked:"true"}]}]}]}],

    dragAndDrop: true,
    drop: onDrop
});
</script>

   

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 20 Mar 2014, 08:40 AM
Hello Designteam,

Please use the sourceNode and destinationNode properties of the event data as well as the getByUid method of the DataSource.

function onDrop(e) {
    var treeview = this,
        sourceUid = $(e.sourceNode).data("uid"),
        destinationUid = $(e.destinationNode).data("uid"),
        source,
        destination;
 
    source = treeview.dataSource.getByUid(sourceUid);
    destination = treeview.dataSource.getByUid(destinationUid);
 
    console.log(source.id, destination.id);
}


Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeView
Asked by
designteam
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or