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

[Jianwei]

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.

[Luis]

Use

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

This item will be expanded

[Jianwei]

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.

[Vladimir Iliev]

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

[Waldemar]

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

[Henryk]

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

[Chris]

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.

[Vladimir Iliev]

Hello Chris,

I would suggest to check the following demo which shows how to customize the treeView animations:

• treeView: animation effects

Regards,
Vladimir Iliev
Telerik

 

 

[Chris]

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

[Alexander Popov]

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