How do you default a TreeView to expanded on initialization?

9 posts, 0 answers
  1. brewerdc
    brewerdc avatar
    20 posts
    Member since:
    May 2007

    Posted 09 Aug 2012 Link to this post

    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
  2. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 10 Aug 2012 Link to this post

    Hi Daniel,

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

    Regards,

    John DeVight
  3. Kendo UI is VS 2017 Ready
  4. brewerdc
    brewerdc avatar
    20 posts
    Member since:
    May 2007

    Posted 13 Aug 2012 Link to this post

    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?
  5. brewerdc
    brewerdc avatar
    20 posts
    Member since:
    May 2007

    Posted 13 Aug 2012 Link to this post

    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.
  6. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 13 Aug 2012 Link to this post

    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
  7. Miika
    Miika avatar
    28 posts
    Member since:
    Jun 2012

    Posted 16 Oct 2012 Link to this post

    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");
  8. Miika
    Miika avatar
    28 posts
    Member since:
    Jun 2012

    Posted 16 Oct 2012 Link to this post

    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");
  9. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 16 Oct 2012 Link to this post

    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)
  10. Miika
    Miika avatar
    28 posts
    Member since:
    Jun 2012

    Posted 17 Oct 2012 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready