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

Nodes lose custom HtmlAttributes when dragged and dropped

4 Answers 251 Views

TreeView

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

Jark Monster asked on 04 Oct 2012, 02:25 PM

Alert.PNG

BeforeDrop.PNG

AfterDrop.PNG

I've assigned an ID attribute to each of my tree nodes to keep a hold of information I need on the controller so that I can save a modified Hierarchy.

However, when I drop a node, the Id attribute is removed. I'm not sure if this is a bug, if I'm doing something wrong, or this is working as intended by the developers.

I've attached a screenshot of my alert window (code below), and two shots of the Html generated from Firebug. One is before the Drop and one is from after.

@(Html.Kendo().TreeView()

.Name("CompanyHierarchy")

.Events(events => events

.DragEnd("HierarchyDragEnd")

)

.BindTo(Model.Hierarchy as System.Collections.IEnumerable, mappings =>

{

mappings.For<BlueGrace.BlueShip.MVC.Models.EnterpriseChildModel>(binding => binding

.Children(c => c.Children)

.ItemDataBound((item, c) =>

{

item.Text = c.Name;

item.HtmlAttributes.Add("Id", c.EnterpriseID.ToString() + "|" + c.EnterpriseID.ToString());

})

);

})

.DragAndDrop(true)

)

<script>

function HierarchyDragEnd(e) {

setTimeout(function () {

var originNode = e.sourceNode.id;

var destinationNode = e.destinationNode.id;

var loc = e.dropPosition;

alert("Origin ID: " + originNode + "\nDestination ID: " + destinationNode + "\nDrop Position: " + loc);

}, 100);

}

</script>

4 Answers, 1 is accepted

answered on 05 Oct 2012, 02:50 PM

Excellent! Works perfectly! I'll post revised code, just in case someone needs a quick reference. Thanks Alex!

function HierarchyDragEnd(e) {

setTimeout(function () {

var originDataItem = $("#CompanyHierarchy").data('kendoTreeView').dataItem(e.sourceNode);

var originNodeId = originDataItem.id;

var originNodeText = originDataItem.text;

var destinationDataItem = $("#CompanyHierarchy").data('kendoTreeView').dataItem(e.destinationNode);

var destinationNodeId = destinationDataItem.id;

var destinationNodeText = destinationDataItem.text;

var dropPosition = e.dropPosition;

alert("Origin ID: " + originNodeId +

"\nOrigin Text: " + originNodeText +

"\nDestination ID: " + destinationNodeId +

"\nDestination Text: " + destinationNodeText +

"\nDrop Position: " + dropPosition);

}, 100);

}