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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to use Raw JavaScript object to build a TreeView?

Platform: jQuery |
Control: ejTreeView
Tags: general

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.


        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 () {


                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:


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.





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.


            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 });


                    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);



                        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.


                fields: { id: "id", parentId: "pid", text: "name", hasChild: "hasChild", dataSource: newJSON, expanded: "expanded" }


            //Creates the Object for the Treeview.

            treeObj = $("#treeView").data("ejTreeView");




The following screenshot displays the TreeView by using the DataSource:


Sample Location:

TreeView Sample

You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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

Live Chat Icon For mobile