Scroll expanded node to top of container

[Ken De Vries]

Hi,

I would like to implement the following behavior:

When I click to expand a tree node, I would like the expanding node to scroll to the top of the treeview.  I did this once a long time ago with an ASP.NET treeview control, but that was before the days of MVC, etc.

 Please see the two attached before and after views.  That should explain what I need to do.

Thanks in advance.

 Ken.

[Ken De Vries]

 I am trying this from another answer, but it does not always work if the node in in the middle of the tree.

 

function OnExpand(e)
    {
        var TV = $('#CategoryTree').data('kendoTreeView');
        var ExpandedNode = e.node;

        var itemScrollTop = ExpandedNode.offsetTop;

        $("#TVContainer").animate({ scrollTop: itemScrollTop });
    }

[Nencho]

Hello Ken,

I have tested locally the approach that you have demonstrated and it seems to work properly event for items, situated in the middle of the TreeView. I am afraid, however, that the desired functionality is a custom one and different implementations of the TreeView may require different approach for this functionality.

I would suggest you to refer to the following example, where the same functionality is implemented in a slightly different approach:

http://jsfiddle.net/isherwood/LqQGR/14/


Regards,
Nencho
Telerik

[Ken De Vries]

With a Treeview that has a complex structure (many levels) this approach does not work either.  Sometimes the container actually scrolls in the wrong direction, hiding the expanded node below the bottom of the container.

This seems like it should be fairly simple, if I could get the offsets to add up correctly.

 This is my latest attempt (based on your reference) and it does not work...

    function OnExpand(e)
    {
        var TV = $('#CategoryTree').data('kendoTreeView');
        var Container = $('#TVContainer');
        var ExpandedNode = e.node;

         var itemScrollTop = ExpandedNode.offsetTop - Container.offset().top + Container.scrollTop();

        Container.animate({ scrollTop: itemScrollTop });
    }

[Ken De Vries]

OK, it seems that ExpandedNode is giving its offsetTop value relative to its parent node.  What I need to get is the expanded node's offsetTop relative to the Treeview Control or to the TreeVirew container.  Or, somehow set the expanded node's top to be equal to the top of the container.

The Node object does not seem to furnish me with any methods or properties that give me access to a normal jquery property for the node's underlying HTML element.  If I had jquery access to the underlying HTML element of the expanded node, I could do this, I think.

Is this possible?

[Ken De Vries]

OK, with your help pointing me to those other posts, I got this figured out.  So, for the sake of others trying to do this, I offer you all the following...

Script for the TreeView template...

 <script id="TreeViewTemplate" type="text/kendo-ui-template">
    <div>
        <span id="Item_#:item.ID#" >#:"Item.Description #</span>
    </div>
</script>

 

<div id="TVContainer">

    @(Html.Kendo().TreeView()
        .Name("MyTreeView")
        .TemplateId("TreeViewTemplate")
        .HtmlAttributes(new { })
        .DataTextField("Description")
        .AutoScroll(false)
        .LoadOnDemand(true)
        .Events(e => e.Select("OnSelected"))
        .Events(e => e.Expand("OnExpand"))
        .DataSource(d => d
            .Model(m => m
                .Id("ID")
                .HasChildren("HasChildren")
            )
            .Read(read => read.Action("Action", "Controller"))
    ))

</div>

    function OnExpand(e)
    {
        var TV = $('#MyTreeView').data('kendoTreeView');
        var Container = $('#TVContainer');
        var ExpandedNode = e.node;
        var DataItem = TV.dataItem(e.node);

        // Get the actual HTML element.  This is set in the template, above.
        var SelectedDiv = $("#Item_" + DataItem.ID);

        var itemScrollTop = SelectedDiv.offset().top - Container.offset().top + Container.scrollTop();

        Container.animate({ scrollTop: itemScrollTop }, 800);
    }

[Nencho]

Hello Ken,

I am happy to see that you were able to achieve the desired functionality. In addition, thank you for sharing your implementation with the community.

Regards,
Nencho
Telerik