Scroll expanded node to top of container

7 posts, 0 answers
  1. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 19 Jan Link to this post

    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.

  2. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 19 Jan in reply to Ken De Vries Link to this post

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

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 21 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 21 Jan in reply to Nencho Link to this post

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

  6. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 21 Jan in reply to Ken De Vries Link to this post

    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?

  7. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 22 Jan Link to this post

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

  8. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 25 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready