How to add a nested node to HierarchialDataSource?

6 posts, 0 answers
  1. David
    David avatar
    48 posts
    Member since:
    Nov 2012

    Posted 12 Nov 2012 Link to this post

    Hi, I'm looking at the "binding to local source" treeview demo below and was wondering how do you structure this AND the schema to allow 3+ levels of "subCategeries" for something like a parts list.  I'm playing with local data but want to eventually populate from remote data and with the list initially expanded.  

    Once I find this out,  I want to use that format to build the JSON response sent from the service.  Thanks.

    var inline = new kendo.data.HierarchicalDataSource({
    data: [
    { categoryName: "Storage", subCategories: [
    { subCategoryName: "Wall Shelving" },
    { subCategoryName: "Floor Shelving" },
    { subCategoryName: "Kids Storage" }
    ] },
    { categoryName: "Lights", subCategories: [
    { subCategoryName: "Ceiling" },
    { subCategoryName: "Table" },
    { subCategoryName: "Floor" }
    ] }
    ],
    schema: {
    model: {
    children: "subCategories"
    }
    }
    });

    $("#treeview-right").kendoTreeView({
    dataSource: inline,
    dataTextField: [ "categoryName", "subCategoryName" ]
    });
  2. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 13 Nov 2012 Link to this post

    HierarchicalDataSource is like DataSource in the sense that you also have transport and read so you can populate it from a server using it.

    Alternatively you can read a JSON from a server using $.getJSON and once read invoke kendoTreeView
    $.getJSON("testTree.json", function (data) {
        tree = $("#treeview").kendoTreeView({
            dataSource             :kendo.observableHierarchy(data)
        }).data("kendoTreeView");
    });
    For configuring which nodes to expand, you have an attribute on each level of the tree called expanded and you can set it to true or false:

    [
        {
            "id"    :100,
            "text"  :"root",
            "sprite":"k-icon k-i-pencil",
            "expanded": true,
            "items" :[
            {
                "id"    :1,
                "text"  :"level1",
                "sprite":"k-icon k-i-pencil",
                "expanded": false,
                "items" :[
                {
                    "id"    :2,
                    "text"  :"level1.1",
                    "sprite":"k-icon k-i-pencil",
                    "expanded":false,
                    "items" :[
                    {
                        "id"  :3,
                        "text":"level1.1.1."
                    },
  3. Kendo UI is VS 2017 Ready
  4. David
    David avatar
    48 posts
    Member since:
    Nov 2012

    Posted 14 Nov 2012 Link to this post

    Hi, I expanded my testing to try a WCF service I created.  Using the Demos “Binding to remote data” I modified as follows for my service.  I tested it through an $.ajax call and it returns the data as: 

    d: "[{"FolderId":1,"FolderName":"Manufacturing","ParentFolderId":0,"UserId":30,"HasChildren":true}]"

    The code...

                    var homogeneous = new kendo.data.HierarchicalDataSource({
                            transport: {
                                    read: {
                                        url: "/Secure/WCF/Example.svc/GetFolder",
                                        dataType: "json",
                                        data: {
                                               UserId: 30,
                                               FolderId: 1
                                        }
                                    }
                            },
                            schema: {
                                model: {
                                    id: "FolderId",
                                    hasChildren: "HasChildren"
                                },
                                 parse: function(data){
                                    return preprocessData(data);
                                }
                            }
                        });

        function preprocessData(data) {
            tree = $("#treeviewRemoteData").kendoTreeView({
             dataSource :kendo.data.observableHierarchy(data)
             }).data("kendoTreeView");
    }

    But I get…

    Microsoft JScript runtime error: Object doesn't support property or method 'observableHierarchy'.  Do I need .data("kendoTreeView") at the end?  I thought calling $("#treeviewRemoteData").kendoTreeView as enough?
     
    I simply don’t know what it wants to bind to the tree.  I’ve also tried the following but I get “splice” error.

    $("#treeviewRemoteData").data("kendoTreeView").setDataSource(data.d);
    OR
    $("#treeviewRemoteData").data("kendoTreeView").setDataSource(JSON.parse(data.d));

    I may be getting off topic, but another thing I don’t get is why does the Kendo “remote” demo’s JSON response from  http://demos.kendoui.com/service/Employees return  with a “callback()”?  I’m obviously missing something.  I want to be able to load my nested folder structure the same way....
     

    callback([{"EmployeeId":2,"FullName":"Andrew Fuller","HasEmployees":true,"ReportsTo":null}])

  5. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 14 Nov 2012 Link to this post

    Sorry David,

    I might have led you to confusion. The reason for not using datasource property is because Hierarchical DataSources load one level at a time (afaik): they don't load next level until you expand a node. So either you implement a way for loading a subtree or you can use "my trick" for loading all tree data and then initialize it.

    If your server is able of loading one level at a time (by sending the @id of next sub-tree to retrieve) you can use the typical datasource option.

    I think that you get the example from http://demos.kendoui.com/web/treeview/remote-data.html, correct? If you pay close attention they are retrieving jsonP not json and that's why it is wrapped by callback.Regarding "Object doesn't support property or method 'observableHierarchy'


    Regarding "Object doesn't support property or method 'observableHierarchy'", which version of KendoUI are you using? Make sure to use the very last one!




     
  6. David
    David avatar
    48 posts
    Member since:
    Nov 2012

    Posted 14 Nov 2012 Link to this post

    Hi,
    I downloaded and unzipped kendoui.web.2012.2.913.  Here are the script references I'm using.  Could I be missing a script reference?  I the dependency docs it states "kendo.web.min.js contains a minified version of all scripts from Kendo UI Web".   Now I'm wondering if I need the "kendo.data.js" etc. 

    <script type="text/javascript" src="../../Javascript/jquery-1.8.2.min.js"></script>
    <s
    cript type="text/javascript" src="../../Javascript/kendo.web.min.js"></script>

  7. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 14 Nov 2012 Link to this post

    Actually the problem is 2012.2.913. A couple of weeks ago the published a beta 2012.2.1024. In this one they fixed a lot of bugs (and added a lot related with tree view). Would you mind trying a newer one? Today (a couple of hours ago) they presented Q3 release (likely to be already available).
Back to Top
Kendo UI is VS 2017 Ready