We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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:

http://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: http://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:

Sample Location:

TreeView Sample

Article ID: Published Date: Last Revised Date: Platform: Control:
4733 04/30/2015 03/04/2016 JavaScript ejTreeView
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon