Skip to Content
0
Nov 16, 2020 at 12:58 PM

SAP Tree Table is not working as expected

81 Views

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

Attachments

vtsfm.png (27.2 kB)