TreeList expanded true for items loaded with ajax

4 posts, 0 answers
  1. Ivo
    Ivo avatar
    11 posts
    Member since:
    Mar 2015

    Posted 28 Sep 2015 Link to this post

    I am trying to expand items in treeList automatically.

    In the following example you can see the result:

    http://dojo.telerik.com/ukOMo/2

    When the items a loaded with ajax extended = true does not really work.

    Any way to achieve this?

    My problem is also that I should open multiple levels of a branch.

     

  2. Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 28 Sep 2015 Link to this post

    Hi Ivo,

    Take a look at this demo illustrating how to expand a Kendo TreeList.  

    You needed to configure your endpoint so the API would return All items with:
    read: {
       url: crudServiceBaseUrl + "/EmployeeDirectory/All",
       dataType: "jsonp"
    }

    Also, your approach to expanding the TreeList Items works fine, but I provided an alternative for you:

    schema: {
      model: {
        id: "EmployeeId",
        parentId: "ReportsTo",
        fields: {
          EmployeeId: { type: "number", nullable: false },
          ReportsTo: { field: "ReportsTo", nullable: true }
        },
        //Alternative to expand the complete TreeList:
        expanded: true
      }
    }

    Hope this helps!

    Regards,
    Pat
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Ivo
    Ivo avatar
    11 posts
    Member since:
    Mar 2015

    Posted 29 Sep 2015 in reply to Patrick Link to this post

    Expanding all was just an example. We have a lot of data and I cannot load the data for the whole tree in the beginning. This is why each branch should open with ajax request. My idea is that when user opens a branch, next time he refreshes the page the branches and subbranches he previously opened to be expanded. This is why I would keep all opened items ids in the localStorage

    var expanded = localStorage["expandedIds"].split(","); //or something like this

    And then comes
    requestEnd : function (e) {
        $.each(e.response, function(){
                if($.inArray(this, expanded) > -1)this.expanded = true;
         });
    }​

     But this seems not to be working out of the box. It seems that my JSONP should already contain the expanded branches. There is no other way right?

  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 01 Oct 2015 Link to this post

    Hello Ivo,

    This approach will work if the children of the expanded items are loaded from the server, as shown in this Dojo snippet.

    Regards,
    Alex Gyoshev
    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