How to use Raw JavaScript object to build a TreeView?
To render the TreeView by using the DataSource, use the JSON data as shown in the following code. Then, map the attributes specified in the JSON DataSource to the corresponding properties in the TreeView fields.
Script
var localData = [ { id: 1, name: "Discover Music", hasChild: true, expanded: true }, { id: 2, pid: 1, name: "Hot Singles" }, { id: 3, pid: 1, name: "Rising Artists" }, { id: 4, pid: 1, name: "Live Music" }, { id: 6, pid: 1, name: "Best of 2013 So Far" }, { id: 7, name: "Sales and Events", hasChild: true, expanded: true }, { id: 8, pid: 7, name: "100 Albums - $5 Each" }, { id: 9, pid: 7, name: "Hip-Hop and R&B Sale" }, { id: 10, pid: 7, name: "CD Deals" }, { id: 11, name: "Categories", hasChild: true }, { id: 12, pid: 11, name: "Songs" }, { id: 13, pid: 11, name: "Bestselling Albums" }, { id: 14, pid: 11, name: "New Releases" }, { id: 15, pid: 11, name: "Bestselling Songs" }, { id: 16, name: "MP3 Albums", hasChild: true }, { id: 17, pid: 16, name: "Rock" }, { id: 18, pid: 16, name: "Gospel" }, { id: 19, pid: 16, name: "Latin Music" }, { id: 20, pid: 16, name: "Jazz" }, { id: 21, name: "More in Music", hasChild: true }, { id: 22, pid: 21, name: "Music Trade-In" }, { id: 23, pid: 21, name: "Redeem a Gift Card" }, { id: 24, pid: 21, name: "Band T-Shirts" }, { id: 25, pid: 21, name: "Mobile MVC" }]; $(function () { $("#treeView").ejTreeView({ fields: { id: "id", parentId: "pid", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" }, }); //Creates Object for TreeView. treeObj = $("#treeView").data("ejTreeView"); }); |
You can see the demo of the TreeView control rendered by using the JSON object from the following link:
https://js.syncfusion.com/demos/web/#!/azure/treeview/databinding-local
Refer to the following document to know more about the data binding support in the TreeView control: https://help.syncfusion.com/ug/js/default.htm#!documents/databinding22.htm
For example, when you are have a Raw JavaScript like,
Person.Address.AddressLine1 = “1 Main Street”
Person.Phone = “802.111.2222”
A TreeView cannot be built as follows, directly with this object.
Person
Address
Line1
Phone
But, you can use a standardly serialized JSON object as follows to build a TreeView.
{
"Person": {
"Address": {
"Line1": "1MainStreet"
},
"Phone": "802.111.2222"
}
}
You have to convert or format the above object into the required JSON format for building a TreeView. Once the JSON data source is formed, map the attributes accordingly, and then the Tree is created with the proper structure. Refer to the following code to build a TreeView from a perfectly serialized JSON object.
<script type="text/javascript"> var treeObj, i = 0, j = 0, parent, hasChild, parents = 0; var newJSON = []; //Perfectly created JSON that needs to be converted into TreeView. var Glossary = { "glossary": { "title": "example glossary", "GlossDiv": { "title": "S", "GlossList": { "GlossEntry": { "ID": "SGML", "SortAs": "SGML", "GlossTerm": "Standard Generalized Markup Language", "Acronym": "SGML", "Abbrev": "ISO 8879:1986", "GlossDef": { "para": "A meta-markup language, used to create markup languages such as DocBook.", "GlossSeeAlso": "GML" }, "GlossSee": "markup" } } } } } function add() { //Passes the standardly serialized JSON to the "CreateTree" function. CreateTree(Glossary); function CreateTree(Data) { //Initially creates the root level/parent node. //Converts the standardly serialized JSON to the required format necessary to form the TreeView. $.each(Data, function (key, value) { //While converting, creates the object for the tree with the required "ID",parentID,hasChild attributes. //Pushes the newly created JSON format to a new object. newJSON.push({ id: ++i, name: key, hasChild: true }); ++parents; if (value != null && typeof value == "object") { enumerate(value, parents); } }); } //Recursive function creates the sub nodes for the root element. function enumerate(data, parentID) { $.each(data, function (k, v) { if (typeof v == "object") { newJSON.push({ pid: parentID, id: "child_" + ++j, name: k, hasChild: true }); enumerate(v, "child_" + j); } else newJSON.push({ pid: parentID, id: "child_" + ++j, name: k, hasChild: false }); }); } //While specifying the DataSource for the TreeView, the object that is newly formed from the standard JSON is specified. $("#treeView").ejTreeView({ fields: { id: "id", parentId: "pid", text: "name", hasChild: "hasChild", dataSource: newJSON, expanded: "expanded" } }); //Creates the Object for the Treeview. treeObj = $("#treeView").data("ejTreeView"); } </script> |
The following screenshot displays the TreeView by using the DataSource: