CODEWITHSUNDEEP
javascriptjquerykendo-ui
Jark Monster
Jark Monster

Reputation: 763

Kendo UI TreeView Nodes lose custom assigned HtmlAttributes after Drag & Drop

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<Models.EnterpriseChildModel>(binding => binding
        .Children(c => c.Children)
        .ItemDataBound((item, c) =>
        {
            item.Text = c.Name;
            item.HtmlAttributes.Add("Id", c.EnterpriseID.ToString());
        })
    );
})
.DragAndDrop(true))

Alert Window missing ID Firebug showing ID on Html BEFORE Drop Firebug showing lack of ID in Html AFTER Drop

Upvotes: 2

Views: 2341

Answers (1)

Jark Monster
Jark Monster

Reputation: 763

I have a solution. It was provided on the Kendo forums by a Telerik team member. I'll post my altered code below as well:

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.

Revised code:

Add ID to dataItem:

    @(Html.Kendo().TreeView()
    .Name("CompanyHierarchy")
    .Events(events => events
        .DragEnd("HierarchyDragEnd")
    )
    .BindTo(Model.Hierarchy as System.Collections.IEnumerable, mappings =>
    {
        mappings.For<Models.EnterpriseChildModel>(binding => binding
            .Children(c => c.Children)
            .ItemDataBound((item, c) =>
            {
                item.Text = c.Name;
                item.Id = c.EnterpriseID.ToString();
            })
        );
    })
    .DragAndDrop(true)
)

Obtain the info from dataItem:

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

Upvotes: 1

Related Questions