Nodes lose custom HtmlAttributes when dragged and dropped

5 posts, 0 answers
  1. Jark Monster
    Jark Monster avatar
    46 posts
    Member since:
    Jan 2012

    Posted 04 Oct 2012 Link to this post

    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>
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 05 Oct 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jark Monster
    Jark Monster avatar
    46 posts
    Member since:
    Jan 2012

    Posted 05 Oct 2012 Link to this post

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

  5. ianc
    ianc avatar
    12 posts
    Member since:
    May 2012

    Posted 22 Apr 2013 Link to this post

    How about other custom data attibutes ? It is any posibility of keep custom data when drag&drop items ?
  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 23 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready