TreeViewItemModel attributes not rendering

7 posts, 0 answers
  1. Steve Jenkins
    Steve Jenkins avatar
    1 posts
    Member since:
    Sep 2008

    Posted 10 Apr 2013 Link to this post

    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!
  2. Daniel
    Admin
    Daniel avatar
    2173 posts

    Posted 12 Apr 2013 Link to this post

    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!
  3. Vangel
    Vangel avatar
    6 posts
    Member since:
    Jun 2011

    Posted 09 Dec 2016 in reply to Daniel Link to this post

    I still have the same problem with Kendo.Mvc 2016.1.226.545. Is it still not fixed or fixing is canceled?
  4. Daniel
    Admin
    Daniel avatar
    2173 posts

    Posted 13 Dec 2016 Link to this post

    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.
  5. Vangel
    Vangel avatar
    6 posts
    Member since:
    Jun 2011

    Posted 13 Dec 2016 in reply to Daniel Link to this post

    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

  6. Daniel
    Admin
    Daniel avatar
    2173 posts

    Posted 15 Dec 2016 Link to this post

    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.
  7. Vangel
    Vangel avatar
    6 posts
    Member since:
    Jun 2011

    Posted 15 Dec 2016 in reply to Daniel Link to this post

    Hi Daniel,

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

    Regards,
    Vangel

Back to Top