1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    9
    Answers
    1
    Vote Rating
    0
    Harshrossi is on a distinguished road

      0  

    Default Answered: Structuring/Nesting of json data to populate a tree grid

    Answered: Structuring/Nesting of json data to populate a tree grid


    I have been struggling to populate a tree grid with json data. I am reading the data from database and then loading it to the tree grid.
    The json data that I get from database is in similar format as given below:



    { "data": [{ "bike": "Yamaha", "color": "Black", "cost": 870000 },{ "bike": "Honda", "color": "Red", "cost": 675000 },{ "bike": "Honda", "color": "Blue", "cost": 690000 },{ "bike": "Suzuki", "color": "White", "cost": 800000" },{ "bike": "Harley", "color": "Yellow", "cost": 980000 },{ "bike": "Harley", "color": "Black", "cost": 880000 }]}

    In my tree panel, the first column is a tree column. I have set the below properties for tree panel
    displayField: 'bike', rootVisible: false, useArrows: true, I am able to load it to the tree grid but the thing is for each data is displayed in seperate node in the tree. I know this is because the json structure is not suitable for the tree.
    I want to convert or nest the json data in a particular format as given below:



    {"data": [{ "bike": "Yamaha", "data": [{ "bike": "Yamaha", "color": "Black", "cost": 870000 }] },{ "bike": "Honda", "data": [{ "bike": "Honda", "color": "Red", "cost": 675000 }, { "bike": "Honda", "color": "Blue", "cost": 690000 }] },{ "bike": "Suzuki", "data": [{ "bike": "Suzuki", "color": "White", "cost": 800000" }] },{ "bike": "Harley", "data": [{ "bike": "Harley", "color": "Yellow", "cost": 980000 }] },{ "bike": "Harley", "data": [{ "bike": "Harley", "color": "Black", "cost": 880000 }] }]} So that I can get the below output..

  2. Check out the data used in the tree grid example from sencha.com
    http://docs.sencha.com/extjs/4.2.1/e...une/#tree-grid

    It looks like this:
    Code:
    {
        "text": ".",
        "children": [{
                "task": "Project: Shopping",
                "duration": 13.25,
                "user": "Tommy Maintz",
                "iconCls": "task-folder",
                "expanded": true,
                "children": [{
                        "task": "Housewares",
                        "duration": 1.25,
                        "user": "Tommy Maintz",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "Kitchen supplies",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }, {
                                "task": "Groceries",
                                "duration": .4,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task",
                                "done": true
                            }, {
                                "task": "Cleaning supplies",
                                "duration": .4,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }, {
                                "task": "Office supplies",
                                "duration": .2,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }
                        ]
                    }, {
                        "task": "Remodeling",
                        "duration": 12,
                        "user": "Tommy Maintz",
                        "iconCls": "task-folder",
                        "expanded": true,
                        "children": [{
                                "task": "Retile kitchen",
                                "duration": 6.5,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }, {
                                "task": "Paint bedroom",
                                "duration": 2.75,
                                "user": "Tommy Maintz",
                                "iconCls": "task-folder",
                                "children": [{
                                        "task": "Ceiling",
                                        "duration": 1.25,
                                        "user": "Tommy Maintz",
                                        "iconCls": "task",
                                        "leaf": true
                                    }, {
                                        "task": "Walls",
                                        "duration": 1.5,
                                        "user": "Tommy Maintz",
                                        "iconCls": "task",
                                        "leaf": true
                                    }
                                ]
                            }, {
                                "task": "Decorate living room",
                                "duration": 2.75,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task",
                                "done": true
                            }, {
                                "task": "Fix lights",
                                "duration": .75,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task",
                                "done": true
                            }, {
                                "task": "Reattach screen door",
                                "duration": 2,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }
                        ]
                    }
                ]
            }, {
                "task": "Project: Testing",
                "duration": 2,
                "user": "Core Team",
                "iconCls": "task-folder",
                "children": [{
                        "task": "Mac OSX",
                        "duration": 0.75,
                        "user": "Tommy Maintz",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "FireFox",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Safari",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Chrome",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "iconCls": "task",
                                "leaf": true
                            }
                        ]
                    }, {
                        "task": "Windows",
                        "duration": 3.75,
                        "user": "Darrell Meyer",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "FireFox",
                                "duration": 0.25,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Safari",
                                "duration": 0.25,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Chrome",
                                "duration": 0.25,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Internet Exploder",
                                "duration": 3,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }
                        ]
                    }, {
                        "task": "Linux",
                        "duration": 0.5,
                        "user": "Aaron Conran",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "FireFox",
                                "duration": 0.25,
                                "user": "Aaron Conran",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Chrome",
                                "duration": 0.25,
                                "user": "Aaron Conran",
                                "iconCls": "task",
                                "leaf": true
                            }
                        ]
                    }
                ]
            }
        ]
    }
    Notice how each parent node has a children property that is an array of child nodes underneath it. A node that doesn't have child nodes under it should also have leaf: true. This is how you'll need to structure your data so that the tree panel will know what child nodes belong to what parent nodes.

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,572
    Answers
    451
    Vote Rating
    203
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Check out the data used in the tree grid example from sencha.com
    http://docs.sencha.com/extjs/4.2.1/e...une/#tree-grid

    It looks like this:
    Code:
    {
        "text": ".",
        "children": [{
                "task": "Project: Shopping",
                "duration": 13.25,
                "user": "Tommy Maintz",
                "iconCls": "task-folder",
                "expanded": true,
                "children": [{
                        "task": "Housewares",
                        "duration": 1.25,
                        "user": "Tommy Maintz",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "Kitchen supplies",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }, {
                                "task": "Groceries",
                                "duration": .4,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task",
                                "done": true
                            }, {
                                "task": "Cleaning supplies",
                                "duration": .4,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }, {
                                "task": "Office supplies",
                                "duration": .2,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }
                        ]
                    }, {
                        "task": "Remodeling",
                        "duration": 12,
                        "user": "Tommy Maintz",
                        "iconCls": "task-folder",
                        "expanded": true,
                        "children": [{
                                "task": "Retile kitchen",
                                "duration": 6.5,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }, {
                                "task": "Paint bedroom",
                                "duration": 2.75,
                                "user": "Tommy Maintz",
                                "iconCls": "task-folder",
                                "children": [{
                                        "task": "Ceiling",
                                        "duration": 1.25,
                                        "user": "Tommy Maintz",
                                        "iconCls": "task",
                                        "leaf": true
                                    }, {
                                        "task": "Walls",
                                        "duration": 1.5,
                                        "user": "Tommy Maintz",
                                        "iconCls": "task",
                                        "leaf": true
                                    }
                                ]
                            }, {
                                "task": "Decorate living room",
                                "duration": 2.75,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task",
                                "done": true
                            }, {
                                "task": "Fix lights",
                                "duration": .75,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task",
                                "done": true
                            }, {
                                "task": "Reattach screen door",
                                "duration": 2,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }
                        ]
                    }
                ]
            }, {
                "task": "Project: Testing",
                "duration": 2,
                "user": "Core Team",
                "iconCls": "task-folder",
                "children": [{
                        "task": "Mac OSX",
                        "duration": 0.75,
                        "user": "Tommy Maintz",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "FireFox",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Safari",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Chrome",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "iconCls": "task",
                                "leaf": true
                            }
                        ]
                    }, {
                        "task": "Windows",
                        "duration": 3.75,
                        "user": "Darrell Meyer",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "FireFox",
                                "duration": 0.25,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Safari",
                                "duration": 0.25,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Chrome",
                                "duration": 0.25,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Internet Exploder",
                                "duration": 3,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }
                        ]
                    }, {
                        "task": "Linux",
                        "duration": 0.5,
                        "user": "Aaron Conran",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "FireFox",
                                "duration": 0.25,
                                "user": "Aaron Conran",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Chrome",
                                "duration": 0.25,
                                "user": "Aaron Conran",
                                "iconCls": "task",
                                "leaf": true
                            }
                        ]
                    }
                ]
            }
        ]
    }
    Notice how each parent node has a children property that is an array of child nodes underneath it. A node that doesn't have child nodes under it should also have leaf: true. This is how you'll need to structure your data so that the tree panel will know what child nodes belong to what parent nodes.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  4. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    9
    Answers
    1
    Vote Rating
    0
    Harshrossi is on a distinguished road

      0  

    Default


    Thanks Slemmon, I am structuring the data in my query itself so that it is in the format you mentioned above.

Thread Participants: 1

Tags for this Thread