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

TreeViewItemModel attributes not rendering

6 Answers 115 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Steve Jenkins
Top achievements
Rank 1
Steve Jenkins asked on 10 Apr 2013, 11:15 AM
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!

6 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 12 Apr 2013, 12:25 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Vangel
Top achievements
Rank 1
answered on 09 Dec 2016, 10:10 AM
I still have the same problem with Kendo.Mvc 2016.1.226.545. Is it still not fixed or fixing is canceled?
0
Daniel
Telerik team
answered on 13 Dec 2016, 07:52 AM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Vangel
Top achievements
Rank 1
answered on 13 Dec 2016, 03:34 PM

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

0
Daniel
Telerik team
answered on 15 Dec 2016, 09:33 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Vangel
Top achievements
Rank 1
answered on 15 Dec 2016, 10:19 AM

Hi Daniel,

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

Regards,
Vangel

Tags
TreeView
Asked by
Steve Jenkins
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Vangel
Top achievements
Rank 1
Share this question
or