CODEWITHSUNDEEP
javascriptjsonkendo-ui
Ramin Bateni
Ramin Bateni

Reputation: 17415

Specifing Kendo treeview children base on "ParentId" field

I have a list of records and i convert it to json:

[ { "id": 1, "name": "A", "parentID": 0, "hasItems": "true" },
  { "id": 2, "name": "B", "parentID": 1, "hasItems": "false" },
  { "id": 3, "name": "C",  "parentID": 1, "hasItems": "false" },
  { "id": 4, "name": "D",  "parentID": 0, "hasItems": "false" }
]

Now i want create a KendoTreeView from above json data:

<div id="treeview55"></div>

<script>
    dtSrc = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: "http://localhost:1132/Discontent/GetTreeNodes",
            dataType: "json"
        }
    },
        ,
    schema:{
        model: {
            id: 'id',
            parentId: 'parentID',
            name: 'name'
        }
    }
});

$("#treeview55").kendoTreeView({
    dataSource: dtSrc,
    dataTextField: "name",
    dataValueField: 'id',
});

Result:

    A
    B
    C
    D

My Expected Result:

   > A
         B
         C
     D

My question:

Is there any way to create a KendoTreeView with above expected result (cascade children and parents) by above json data???

Upvotes: 1

Views: 2393

Answers (2)

Krishna Mani
Krishna Mani

Reputation: 177

Refer below part of code will hep you to solve your problem

     <div id="tree"></div>
   <script>
        var flatData = [ { "id": 1, "text": "A", "parent": 0, "hasItems":                "true" },
 { "id": 2, "text": "B", "parent": 1, "hasItems": "false" },
    { "id": 3, "text": "C",  "parent": 1, "hasItems": "false" },
   { "id": 4, "text": "D",  "parent": 0, "hasItems": "false" }
  ];

  function processTable(data, idField, foreignKey, rootLevel) {
  var hash = {};

 for (var i = 0; i < data.length; i++) {
var item = data[i];
var id = item[idField];
var parentId = item[foreignKey];

hash[id] = hash[id] || [];
hash[parentId] = hash[parentId] || [];

     item.items = hash[id];
    hash[parentId].push(item);
    }

   return hash[rootLevel];
 }

 // the tree for visualizing data
  $("#tree").kendoTreeView({
 dataSource: processTable(flatData, "id", "parent", 0),
     loadOnDemand: false
   });
  </script>

i just prepare a sample based on your sample data, i hopes it helps to you.

Find answer from this jsbin

Upvotes: 2

Alex Gyoshev
Alex Gyoshev

Reputation: 11977

At this moment, no. The Kendo UI TreeView works with hierarchical data, and the above is a flattened hierarchy. You need to process the data it so that it becomes hierarchical, like shown in this excellent answer by Jon Skeet.

Upvotes: 0

Related Questions