TreeViewItemModel attributes not rendering

[Steve Jenkins]

I am creating a IEnumerable of TreeViewItemModel on the server side and passing it to the treeview.

@(Html.Kendo().TreeView()
        .Name("treeview")
        .DragAndDrop(true)
        .BindTo(Model.TreeViewItems)
        .Events(events => events
            .Drop("onDrop")
        )
    )

I have added custom attributes to the items but they not rendered.

item.HtmlAttributes.Add(new KeyValuePair<string,string>("data_owner", resource.OwnerId.ToString())); 

What am I doing wrong?

It would also be nice if all attributes including ID did not disappear following drag and drop!

[Daniel]

Hello,

Thank you for noticing the problem with the attributes. I reproduced it on my side and we will fix it for the next builds. A workaround for now is to bind the TreeViewItemModel collection explicitly and set the attributes. As a small sign of gratitude I updated your Telerik points.
Regarding the problem with the dragging, currently the TreeView does not support setting the attributes through the data on the client so the attributes will not be included when the node is moved to the new position. You could a persist the attribute by using the drop and dataBound events e.g.

var owner,
    uid;
function drop(e) {
    var node = e.sourceNode;
    owner = node.getAttribute("data_owner");
    uid = node.getAttribute("data-uid");
}

function dataBound(e) {
    if (owner && e.node && e.node.data("uid") == uid) {
        e.node.attr("data_owner", owner);
        owner = undefined;
    }
}

Regards,
Daniel
the Telerik team

[Vangel]

I still have the same problem with Kendo.Mvc 2016.1.226.545. Is it still not fixed or fixing is canceled?

[Daniel]

Hello,

Could you clarify what problems are you experiencing and provide the code that you are using? The attributes seems to be rendered initially when setting HtmlAttributes property of the TreeViewItemModel with the specified version.

Regards,
Daniel
Telerik by Progress

[Vangel]

Hi Daniel,

Yes, the attributes are render properly but they disappear on drop node.

Here is my code to reproduce the issue. Here are the items to bind to the treeview:

TreeViewItemModel[] treeViewItems =
{
            new TreeViewItemModel { Id = "11111", Text = "Text 1" },
            new TreeViewItemModel { Id = "22222", Text = "Text 2" },
            new TreeViewItemModel { Id = "33333", Text = "Text 3" },
            new TreeViewItemModel { Id = "44444", Text = "Text 4" },
        };
treeViewItems[0].HtmlAttributes.Add("data-test-attr", "value1");
treeViewItems[1].HtmlAttributes.Add("data-test-attr", "value2");
treeViewItems[2].HtmlAttributes.Add("data-test-attr", "value3");
treeViewItems[3].HtmlAttributes.Add("data-test-attr", "value4");

 

This is the configuration of the treeview control:

@(Html.Kendo().TreeView()
        .Name("treeview")
        .DragAndDrop(true)
        .BindTo(treeViewItems)
        .Events(events => events.DragEnd("onNodeDropped")))

 

and the javascript function on dropped node:

function onNodeDropped(e) {
        var postData = {
            movedItemId: $(e.sourceNode).attr("data-id"),
            movedValue: $(e.sourceNode).attr("data-test-attr"),
            destinationItemId: $(e.destinationNode).attr("data-id"),
            destinationValue: $(e.destinationNode).attr("data-test-attr"),
            position: e.dropPosition
        };
        $.post(url, postData, function () {});
    };

 

The attributes for the sourceNode are missing.

Is this by design or is a bug? Is there workaround to take attributes for the sourceNode?

 

Regards,

Vangel

[Daniel]

Hello again Vangel,

I am afraid that the client-side rendering still does not support attributes and they will already be lost on dragEnd. You could persist them in the drop event and use dragEnd to set them back to the element if needed e.g.

.Events(e=> e.Drop("onDrop").DragEnd("onDragEnd"))

function onDrop(e) {
    var sourceItem = this.dataItem(e.sourceNode);
    sourceItem.dataTest = $(e.sourceNode).attr("data-test-attr");

    var destinationItem = this.dataItem(e.destinationNode);
    destinationItem.dataTest = $(e.destinationNode).attr("data-test-attr");
}

function onDragEnd(e) {
    var sourceItem = this.dataItem(e.sourceNode);
    var destinationItem = this.dataItem(e.destinationNode);
    var postData = {
        movedItemId: sourceItem.id,
        movedValue: sourceItem.dataTest,
        destinationItemId: destinationItem.id,
        destinationValue: destinationItem.dataTest,
        position: e.dropPosition
    };
    $(e.sourceNode).attr("data-test-attr", sourceItem.dataTest);
    $(e.destinationNode).attr("data-test-attr", destinationItem.dataTest);
}

Regards,
Daniel
Telerik by Progress

[Vangel]

Hi Daniel,

Thank you for the quick response. This is good idea and is a solution for my problem.

Regards,
Vangel