This is a migrated thread and some comments may be shown as answers.

How do you default a TreeView to expanded on initialization?

8 Answers 3127 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
brewerdc
Top achievements
Rank 1
brewerdc asked on 09 Aug 2012, 06:27 PM
Hello,

I'm attempting to build a Kendo TreeView that is fully expanded by default.

My data structure is a simple un-ordered list similar to this:
<ul id="treeView">
   <li>1
      <ul>
         <li>1.1</li>
      </ul>
   </li>
   <li>2
      <ul>
         <li>2.1
            <ul>
               <li>2.1.1</li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

Then on document.ready():
$(document).ready(function () {
     $("#treeView").kendoTreeView();
});

Any suggestions?

Thanks,
Daniel

8 Answers, 1 is accepted

Sort by
0
John DeVight
Top achievements
Rank 1
answered on 10 Aug 2012, 09:44 PM
Hi Daniel,

Try this:
$(document).ready(function () {
    var treeView = $("#treeView").kendoTreeView().data("kendoTreeView");
    treeView.expand(".k-item");
});

Regards,

John DeVight
0
brewerdc
Top achievements
Rank 1
answered on 13 Aug 2012, 04:30 PM
Still receiving the "Microsoft JScript runtime error: 'treeView' is undefined" error.  When I view the source, no classes are applied to the <ul> and <li>'s in the tree.  It's important to note that I'm building the unordered list in Razor BEFORE I call kendoTreeView().

Any ideas?
0
brewerdc
Top achievements
Rank 1
answered on 13 Aug 2012, 04:40 PM
I've solved the problem.  It appears combining calls '.kendoTreeView().data("kendoTreeView")' would result in an null value.  After separating the calls similar to below the 'roleTree' variable was found and I could expand all parent nodes via '.expand()'. Adding a class to all the <ul> elements did the trick.  Resolved code below:

$(document).ready(function () {
    $("#roleTree").kendoTreeView();
 
    // Default to expanded.
    var roleTree = $("#roleTree").data("kendoTreeView");
    roleTree.expand(".treeNode");
});

Thanks for the help John.
0
John DeVight
Top achievements
Rank 1
answered on 13 Aug 2012, 04:44 PM
Hi Daniel,

Glad to see that you got it working :-)

Attached is an ASP.NET MVC RAZOR example where I combine calls .kendoTreeView().data("kendoTreeView") for reference.

Regards,

John DeVight
0
Miika
Top achievements
Rank 1
answered on 16 Oct 2012, 08:33 AM
Hi,

I was able to use this code (shown below), to expand the tree but it only expands the first level. Calling tree.expand(".k-item"); multiple times will cause more levels to be expanded, but seems a bit silly. All of the data is loaded into the tree already via a json object retrieved from the server. Is there any other elegant method for expanding the whole tree up to an arbitrary level? If a Telerik person happens to read this, I would like to suggest an "openExpanded" option added to the tree so that all nodes are expanded by default.



    $("#koulutuspuu").kendoTreeView({
        dataSource: koulutuspuuSisalto,
        dataTextField: [ "nimi" ]
    });
    var tree = $("#koulutuspuu").data("kendoTreeView")
    tree.expand(".k-item");
0
Miika
Top achievements
Rank 1
answered on 16 Oct 2012, 08:39 AM
Right, solved my own problem two minutes after posting :P

If you set the configuration option "loadOnDemand: false", then a single expand() call will expand the whole tree. Posting my whole code below in case its of use to someone else.

    var koulutuspuuSisalto = new kendo.data.HierarchicalDataSource({
        data: sisalto,
        schema: {
            model: {
                id: "id",
                children: "lapsiElementit"
            }
        }
    });

    $("#koulutuspuu").kendoTreeView({
        dataSource: koulutuspuuSisalto,
        dataTextField: [ "nimi" ],
        loadOnDemand: false
    });

    var tree = $("#koulutuspuu").data("kendoTreeView")
    tree.expand(".k-item");
0
Nohinn
Top achievements
Rank 1
answered on 16 Oct 2012, 01:44 PM
Miika, if you're returning already the full structure of the tree and you want the nodes to be initially expanded, you can add too
expanded: true
to the json object of the node, and you won't need to call the expand function of the tree (and you will avoid it to loop through all the levels looking for expandable nodes)
0
Miika
Top achievements
Rank 1
answered on 17 Oct 2012, 05:23 AM
I would like to keep my data source (MVC Controller action) free of any UI related information, i.e. that only the data content and structure comes from server side, and UI related settings stay in the View. But using "expanded: true" might be necessary if I want only certain nodes to be open, and others collapsed.
Tags
TreeView
Asked by
brewerdc
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
brewerdc
Top achievements
Rank 1
Miika
Top achievements
Rank 1
Nohinn
Top achievements
Rank 1
Share this question
or