Nodes lose custom HtmlAttributes when dragged and dropped

[Jark Monster]

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>

[Alex Gyoshev]

Hello Mark,

The HtmlAttributes are not persisted after drag&drop operations. In this particular case, it is best to add the Id to the item and access it through the dataItem method on the client.

Regards,
Alex Gyoshev
the Telerik team

[Jark Monster]

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);

}

[ianc]

How about other custom data attibutes ? It is any posibility of keep custom data when drag&drop items ?

[Alex Gyoshev]

Hello Lucasz,

You can attach arbitrary data to the treeview data items, which will be available through the dataItem method I mentioned. HTML attributes cannot be persisted at this moment.

Greetings,
Alex Gyoshev
the Telerik team