CODEWITHSUNDEEP
sapui5
user3921747
user3921747

Reputation: 9

How to implement TreeTable in sapui5

i have a model like this 

[ {"name":"Main 1","description":"main1 Description",
         "children": [{
               "name": "SUB 1",
               "description": "SUB 1 Description",
               "children":[
                    {
                        "name": "SUB 1.1",
                        "description": "SUB 1.1 Description"
                    },
                    {
                        "name": "SUB 1.2",
                        "description": "SUB 1.2 Description"
                    }         ]
                }],
                "parent":[{"name": "parent sub"}]
            },
   {"name":"Main 2","description":"main2 Description",children:[],parent:[]},
   {"name":"Main 3","description":"main3 Description",children:[],parent:[]},
   {"name":"Main 4","description":"main4 Description",children:[],parent:[]}
 ]

and i want to display name and description property. The contents in the "children" property should be a sub-level in the row, and i don't want to display "parent" content in this tree table. how can i restrict "parent" property from the tree table.

Upvotes: 1

Views: 9959

Answers (2)

schnoedel
schnoedel

Reputation: 3948

The sap.ui.model.ClientTreeBinding used by the TreeTable with a JSONModel or XMLModel supports the parameter arrayNames. This parameter expects an array of the model property names that will create a sublevel (if containing an object).

So in your example you should use something like this:

treeTable.bindRows({path: '/pathToData', parameters: { arrayNames: ['children'] }});

or in XMLView:

<TreeTable rows="{path: '/pathToData', parameters: { arrayNames: ['children'] } }" >
...
</TreeTable>

Theres not much to find in the documentation about this except for one example. You can find the source for the example in the openui5 github.

Upvotes: 4

Saddamhussain
Saddamhussain

Reputation: 870

Try This Should Work 

var oData={
     "children":[ 
               {"name":"Main 1","description":"main1 Description", "children": [], "parent":[]},
               {"name":"Main 2","description":"main2 Description","children":[],parent:[]},
               {"name":"Main 3","description":"main3 Description","children":[],parent:[]},
               {"name":"Main 4","description":"main4 Description","children":[],parent:[]}
           ]
   };

var oTable = new sap.ui.table.TreeTable({
    columns: [
        new sap.ui.table.Column({label: "Name", template: "name"}),
        new sap.ui.table.Column({label: "Description", template: "description"})
    ],
    selectionMode: sap.ui.table.SelectionMode.Single,
    enableColumnReordering: true,
    expandFirstLevel: true,
    });

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
oTable.setModel(oModel);
oTable.bindRows("/children");

Upvotes: 1

Related Questions