Is there a way to expand all nodes in multiple level for treeview

10 posts, 1 answers
  1. Jianwei
    Jianwei avatar
    20 posts
    Member since:
    Feb 2011

    Posted 20 Sep 2012 Link to this post

    Hello, 

    I have a treeview which has multiple level of hierachy data, is there a way that I can expand all the nodes?

    I tried to use function $("#treeview").data("kendoTreeView").expand(".k-item") , I can only expand the first level, is there a way that I can expand nodes at every level.

    Thank you.

  2. Luis
    Luis avatar
    1 posts
    Member since:
    Aug 2012

    Posted 21 Sep 2012 Link to this post

    Use

    <li data-expanded="true">
    XX
    </li>

    This item will be expanded
  3. Kendo UI is VS 2017 Ready
  4. Jianwei
    Jianwei avatar
    20 posts
    Member since:
    Feb 2011

    Posted 21 Sep 2012 Link to this post

    Thank you for your reply, this is not exactly what I am looking for, I am looking for some function that I can use to expand all, and collapse all.
  5. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 26 Sep 2012 Link to this post

    Hi Jianwei,

     

    Basically there are expand and collapse methods, which will expand and collapse all of the tree nodes, but when you are using the hierarchical data source the expand method will expand only the first level of the tree, because its loaded on demand. In this case you can call the expand method on requestEnd event of the dataSource:

    var Categories = new kendo.data.HierarchicalDataSource({
        type: "odata",
        requestEnd: requestEndHandler,

    This event will call the expand method after each tree level load, and will stop when all levels of the tree are expanded. 

    e.g.:
    <script type="text/javascript">
        function requestEndHandler()
        {
            setTimeout("expandNodes()");
        }
     
        function expandNodes()
        {
            $("#treeview").data("kendoTreeView").expand(".k-item");
        }
    </script>
    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Waldemar
    Waldemar avatar
    4 posts
    Member since:
    Feb 2014

    Posted 04 Mar 2014 in reply to Vladimir Iliev Link to this post

    The only way is to preload all the data and then set dataSource as a normal JS array (as if it was static data).
    Because of this the whole tree will be generated at once and expand(".k-item") works like a charm.

    Br
    Waldemar
      
    //Load tree data and then set tree.
    //
    //Why didn't we use kendo.data.HierarchicalDataSource? Because the levels are loaded on demand and we can only expand one level at a time with that.
        DataLayer.CTree.Load( userCredentials, function( data: any )
        {
        //Set tree.
            $("#ipt_tree").kendoTreeView(
            {
                dataSpriteCssClassField: "sprite",
                dataSource: data,
                template: "<span data-oid='#= item.oid#'>#= item.text#</span>",
                change: CAdmin.Tree_Item_Selected
            });
     
        //Expand all.
            $( "#ipt_tree").data( "kendoTreeView" ).expand(".k-item");
        },
        function( html_code: number, html_status: string )
        {
        //A transport operation failed -> set failed status.
            CPage.Status_Add( html_code, "Get tree request failed with: '" + html_status + "'.", true );
        });
  7. Henryk
    Henryk avatar
    4 posts
    Member since:
    Feb 2013

    Posted 25 Feb 2015 in reply to Jianwei Link to this post

    Create a button for it and add event oncklick like bellow (b is counter of not expand node):
    $("#expandAllNodes").click(function (e) {
            e.preventDefault();
            expandNextLevel();
        });
        function expandNextLevel() {
            setTimeout(function () {
                var treeview = $("#treeview").data("kendoTreeView");
                var b = $('.k-item .k-plus').length;
                treeview.expand(".k-item");
                treeview.trigger('dataBound');
                if (b > 0) {
                    expandNextLevel();
                }

            }, 200);
        }
  8. Chris
    Chris avatar
    5 posts
    Member since:
    Aug 2012

    Posted 08 May 2015 in reply to Vladimir Iliev Link to this post

    Is there some way to get this initial expand all to animate? It's kind of jumpy at page load and doesn't look professional.
  9. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 13 May 2015 Link to this post

    Hello Chris,

    I would suggest to check the following demo which shows how to customize the treeView animations:
    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Chris
    Chris avatar
    5 posts
    Member since:
    Aug 2012

    Posted 13 May 2015 in reply to Vladimir Iliev Link to this post

    Vladimir,

     

     I had already tried that - and it works fine to customize the animation after the full tree loads (expanding and collapsing the nodes manually), but not for this initial expansion of all nodes.

     

     Chris

  11. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 18 May 2015 Link to this post

    Hi Chris,

    The current TreeView's rendering mechanism does not support animating the initial expansion and I am afraid there is no workaround that I can suggest.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready