Articles in this section
Category / Section

How to use Raw JavaScript object to build a TreeView?

3 mins read

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:

Treeview

Sample Location:

TreeView Sample

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied