SAP Tree Table is not working as expected

[muhsin_panakkal]

Dear Experts,

I am developing one UI5 Application, in this I am trying for Tree Table, I am using the below method.

Tree Table

Instead of external JSON, I am declaring it in my controller and calling to my view. but its coming as like this.

no drill down is creating, here is my code.

<TreeTable
        id="treeTable"
        selectionMode="Single"
        enableColumnReordering="false"
        expandFirstLevel="false"
        rows="{
            path : '/Items',
            parameters : {
                countMode: 'Inline',
                treeAnnotationProperties : {
                    hierarchyLevelFor : 'HierarchyLevel',
                    hierarchyNodeFor : 'NodeID',
                    hierarchyParentNodeFor : 'ParentNodeID',
                    hierarchyDrillStateFor : 'DrillState'
                }
            }
        }">
        <columns>
            <Column label="Description">
                <template>
                    <m:Text text="{Description}" wrapping="false" />
                </template>
            </Column>
            <Column label="HierarchyLevel">
                <template>
                    <m:Text text="{HierarchyLevel}" wrapping="false" />
                </template>
            </Column>
            <Column label="NodeID">
                <template>
                    <m:Text text="{NodeID}" wrapping="false" />
                </template>
            </Column>
            <Column label="ParentNodeID">
                <template>
                    <m:Text text="{ParentNodeID}" wrapping="false" />
                </template>
            </Column>
        </columns>
    </TreeTable>

onInit: function() {
			var data = [{
				"NodeID": 1,
				"HierarchyLevel": 0,
				"Description": "1",
				"ParentNodeID": null,
				"DrillState": "expanded"
			}, {
				"NodeID": 2,
				"HierarchyLevel": 0,
				"Description": "2",
				"ParentNodeID": null,
				"DrillState": "expanded"
			}, {
				"NodeID": 3,
				"HierarchyLevel": 0,
				"Description": "3",
				"ParentNodeID": null,
				"DrillState": "expanded"
			}, {
				"NodeID": 4,
				"HierarchyLevel": 1,
				"Description": "1.1",
				"ParentNodeID": 1,
				"DrillState": "leaf"
			}, {
				"NodeID": 5,
				"HierarchyLevel": 1,
				"Description": "1.2",
				"ParentNodeID": 1,
				"DrillState": "expanded"
			}, {
				"NodeID": 6,
				"HierarchyLevel": 2,
				"Description": "1.2.1",
				"ParentNodeID": 5,
				"DrillState": "leaf"
			}, {
				"NodeID": 7,
				"HierarchyLevel": 2,
				"Description": "1.2.2",
				"ParentNodeID": 5,
				"DrillState": "leaf"
			}, {
				"NodeID": 8,
				"HierarchyLevel": 1,
				"Description": "2.1",
				"ParentNodeID": 2,
				"DrillState": "leaf"
			}, {
				"NodeID": 9,
				"HierarchyLevel": 1,
				"Description": "2.2",
				"ParentNodeID": 2,
				"DrillState": "leaf"
			}, {
				"NodeID": 10,
				"HierarchyLevel": 1,
				"Description": "2.3",
				"ParentNodeID": 2,
				"DrillState": "leaf"
			}, {
				"NodeID": 11,
				"HierarchyLevel": 1,
				"Description": "3.1",
				"ParentNodeID": 3,
				"DrillState": "expanded"
			}, {
				"NodeID": 12,
				"HierarchyLevel": 2,
				"Description": "3.1.1",
				"ParentNodeID": 11,
				"DrillState": "expanded"
			}, {
				"NodeID": 13,
				"HierarchyLevel": 3,
				"Description": "3.1.1.1",
				"ParentNodeID": 12,
				"DrillState": "leaf"
			}, {
				"NodeID": 14,
				"HierarchyLevel": 3,
				"Description": "3.1.1.2",
				"ParentNodeID": 12,
				"DrillState": "leaf"
			}, {
				"NodeID": 15,
				"HierarchyLevel": 3,
				"Description": "3.1.1.3",
				"ParentNodeID": 12,
				"DrillState": "leaf"
			}, {
				"NodeID": 16,
				"HierarchyLevel": 3,
				"Description": "3.1.1.4",
				"ParentNodeID": 12,
				"DrillState": "leaf"
			}];
			var oJsonModel = new sap.ui.model.json.JSONModel();
			oJsonModel.setData({
				"Items": data
			});
			this.getView().byId("treeTable").setModel(oJsonModel);

Can anybody guide me how to resolve this,

Thanks,

Muhsin

[sergey_muratov]

Hi

I think that the problem is in next. You are using clien-side data model (JSON, XML). But parameter "treeAnnotationProperties" will be used only with server-side data model (OData). Please compare "mParameters" for JSONTreeBinding and ODataTreeBinding.

[muhsin_panakkal]

Hai Sergey,

Thanks for your response, Yes, you are right, It need to add annotation file in client side, for now I have converted as like as JSONTreeBinding, now Its working as expected.

Thanks,

Muhsin

[Valeck]

have you tried to use a json like this

{
  "catalog": {
    "clothing": {
      "categories": [
        {"name": "Women", "categories": [
          {"name":"Clothing", "categories": [
            {"name": "Dresses", "categories": [
              {"name": "Casual Red Dress", "amount": 16.99, "currency": "EUR", "size": "S"},
              {"name": "Short Black Dress", "amount": 47.99, "currency": "EUR", "size": "M"},
              {"name": "Long Blue Dinner Dress", "amount": 103.99, "currency": "USD", "size": "L"}
            ]},
            {"name": "Tops", "categories": [
              {"name": "Printed Shirt", "amount": 24.99, "currency": "USD", "size": "M"},
              {"name": "Tank Top", "amount": 14.99, "currency": "USD", "size": "S"}
            ]},
            {"name": "Pants", "categories": [
              {"name": "Red Pant", "amount": 32.99, "currency": "USD", "size": "M"},
              {"name": "Skinny Jeans", "amount": 44.99, "currency": "USD", "size": "S"},
              {"name": "Black Jeans", "amount": 99.99, "currency": "USD", "size": "XS"},
              {"name": "Relaxed Fit Jeans", "amount": 56.99, "currency": "USD", "size": "L"}
            ]},
            {"name": "Skirts", "categories": [
              {"name": "Striped Skirt", "amount": 24.99, "currency": "USD", "size": "M"},
              {"name": "Black Skirt", "amount": 44.99, "currency": "USD", "size": "S"}
            ]}
          ]},
          {"name":"Jewelry", "categories": [
              {"name": "Necklace", "amount": 16.99, "currency": "USD"},
              {"name": "Bracelet", "amount": 47.99, "currency": "USD"},
              {"name": "Gold Ring", "amount": 399.99, "currency": "USD"}
            ]},
          {"name":"Handbags", "categories": [
            {"name": "Little Black Bag", "amount": 16.99, "currency": "USD", "size": "S"},
            {"name": "Grey Shopper", "amount": 47.99, "currency": "USD", "size": "M"}
          ]},
          {"name":"Shoes", "categories": [
            {"name": "Pumps", "amount": 89.99, "currency": "USD"},
            {"name": "Sport Shoes", "amount": 47.99, "currency": "USD"},
            {"name": "Boots", "amount": 103.99, "currency": "USD"}
          ]}
        ]},
        {"name": "Men", "categories": [
          {"name":"Clothing", "categories": [
            {"name": "Shirts", "categories": [
              {"name": "Black T-shirt", "amount": 9.99, "currency": "USD", "size": "XL"},
              {"name": "Polo T-shirt", "amount": 47.99, "currency": "USD", "size": "M"},
              {"name": "White Shirt", "amount": 103.99, "currency": "USD", "size": "L"}
            ]},
            {"name": "Pants", "categories": [
              {"name": "Blue Jeans", "amount": 78.99, "currency": "USD", "size": "M"},
              {"name": "Stretch Pant", "amount": 54.99, "currency": "USD", "size": "S"}
            ]},
            {"name": "Shorts", "categories": [
              {"name": "Trouser Short", "amount": 62.99, "currency": "USD", "size": "M"},
              {"name": "Slim Short", "amount": 44.99, "currency": "USD", "size": "S"}
            ]}
          ]},
          {"name":"Accessories", "categories": [
            {"name": "Tie", "amount": 36.99, "currency": "USD"},
            {"name": "Wallet", "amount": 47.99, "currency": "USD"},
            {"name": "Sunglasses", "amount": 199.99, "currency": "USD"}
          ]},
          {"name":"Shoes", "categories": [
            {"name": "Fashion Sneaker", "amount": 89.99, "currency": "USD"},
            {"name": "Sport Shoe", "amount": 47.99, "currency": "USD"},
            {"name": "Boots", "amount": 103.99, "currency": "USD"}
          ]}
        ]},
          {"name": "Girls", "categories": [
            {"name":"Clothing", "categories": [
              {"name": "Shirts", "categories": [
                {"name": "Red T-shirt", "amount": 16.99, "currency": "USD", "size": "S"},
                {"name": "Tunic Top", "amount": 47.99, "currency": "USD", "size": "M"},
                {"name": "Fuzzy Sweater", "amount": 103.99, "currency": "USD", "size": "L"}
              ]},
              {"name": "Pants", "categories": [
                {"name": "Blue Jeans", "amount": 24.99, "currency": "USD", "size": "M"},
                {"name": "Red Pant", "amount": 54.99, "currency": "USD", "size": "S"}
              ]},
              {"name": "Shorts", "categories": [
                {"name": "Jeans Short", "amount": 32.99, "currency": "USD", "size": "M"},
                {"name": "Sport Short", "amount": 14.99, "currency": "USD", "size": "S"}
              ]}
            ]},
            {"name":"Accessories", "categories": [
              {"name": "Necklace", "amount": 26.99, "currency": "USD"},
              {"name": "Gloves", "amount": 7.99, "currency": "USD"},
              {"name": "Beanie", "amount": 12.99, "currency": "USD"}
            ]},
            {"name":"Shoes", "categories": [
              {"name": "Sport Shoes", "amount": 39.99, "currency": "USD"},
              {"name": "Boots", "amount": 87.99, "currency": "USD"},
              {"name": "Sandals", "amount": 63.99, "currency": "USD"}
            ]}
          ]},
            {"name": "Boys", "categories": [
              {"name":"Clothing", "categories": [
                {"name": "Shirts", "categories": [
                  {"name": "Black T-shirt with Print", "amount": 16.99, "currency": "USD", "size": "S"},
                  {"name": "Blue Shirt", "amount": 47.99, "currency": "USD", "size": "M"},
                  {"name": "Yellow Sweater", "amount": 63.99, "currency": "USD", "size": "L"}
                ]},
                {"name": "Pants", "categories": [
                  {"name": "Blue Jeans", "amount": 44.99, "currency": "USD", "size": "M"},
                  {"name": "Brown Pant", "amount": 89.99, "currency": "USD", "size": "S"}
                ]},
                {"name": "Shorts", "categories": [
                  {"name": "Sport Short", "amount": 32.99, "currency": "USD", "size": "M"},
                  {"name": "Jeans Short", "amount": 99.99, "currency": "USD", "size": "XS"},
                  {"name": "Black Short", "amount": 56.99, "currency": "USD", "size": "L"}
                ]}
              ]},
              {"name":"Accessories", "categories": [
                {"name": "Sunglasses", "amount": 36.99, "currency": "USD"},
                {"name": "Beanie", "amount": 17.99, "currency": "USD"},
                {"name": "Scarf", "amount": 15.99, "currency": "USD"}
              ]},
              {"name":"Shoes", "categories": [
                {"name": "Sneaker", "amount": 89.99, "currency": "USD"},
                {"name": "Sport Shoe", "amount": 47.99, "currency": "USD"},
                {"name": "Boots", "amount": 103.99, "currency": "USD"}
              ]}
            ]}
        ]}


    },
  "sizes": [
    {"key": "XS", "value": "Extra Small"},
    {"key": "S", "value": "Small"},
    {"key": "M", "value": "Medium"},
    {"key": "L", "value": "Large"}
  ]
  }

bye

[muhsin_panakkal]

Dear Valerio,

Thanks for your response, Yea, I have converted my JSON as like above and now its working as expected.

Thanks,

Muhsin