Initial settings/params for HierarchicalDataSource/TreeView

3 posts, 0 answers
  1. Mark
    Mark avatar
    16 posts
    Member since:
    Apr 2012

    Posted 22 Jun 2012 Link to this post

    Hi,

    Based on your beta demo here: http://demos.kendoui.com/beta/web/treeview/odata-binding.html 

    I have put together the following:

    var Folders = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: function(opt) {
                        if(opt.UID == undefined) opt.UID = 0;
                        return kendo.format("/api/GetFolders/{0}",opt.UID)
                        },
                    type: "GET",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    hasChildren: function() {
                        return true;
                    },
                    id: "UID",
                    children: Folders
                }
            }
        });


        $("#testTree").kendoTreeView({
            dataSource: Folders,
            dataTextField: ["Title"]
        });

    As you can see I am using a fairly ugly hack for the initial UID setting. But it works with my data.

    Since there is no documentation yet (that I can see) can you advise if there is a better way of doing this? In particular I'd like to have more than one TreeView on screen (sharing a single data source if possible) and be able to specify at runtime where each TreeView should 'start'.

    Thank,

    Mark.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 27 Jun 2012 Link to this post

    Hi Mark,

    Your code looks OK, as a slightly different approach I would recommend the following configuration:
    var homogeneous = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "example",
                dataType: "json"
            }
        },
        schema: {
            data: "employees",
            model: {
                id: "employeeId",
                hasChildren: "hasChildren"
            }
        }
    });
     
    $("#treeview").kendoTreeView({
        dataSource: homogeneous,
        dataTextField: "employeeName"
    });

    The "hasChildren " field indicates if the current model has children:
    {
        "employees": [{ "employeeName": "Andrew", "employeeId": 1, "hasChildren": true }]
    }

    When the HierarchicalDataSource is homogeneous only one level is enough to be defined, however you will still have to use the valid approach that is used to construct the url.

    Kind regards,
    Alexander Valchev
    the Telerik team
    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. foo
    foo avatar
    1 posts
    Member since:
    Sep 2012

    Posted 10 Sep 2012 Link to this post

    the treeview (as in your remote with hirachical data example) works great, but when I wrap it into a viemodel, it stops working.
    does it mean the recommended way is to use a regular datasource and use the id from the treeview to select an editable (data-bound form) item?
Back to Top