Error binding in sap.ui.table Tree Table

[#1]

Hello all,

I am facing some issues with the binding in an sap.ui.table Tree Table. The tree structure is not displayed correctly in the table; all the nodes(both parent and children) are on the first level.

I´m specifying that I´m using an SAPUI5 Version: latest 1.66.1.

I've declared the table in the xml view like this:

<mvc:View controllerName="t.tree.controller.Worklist" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:t="sap.ui.table" xmlns:core="sap.ui.core"> <Shell id="shell">

<App id="app">

<pages>

<Page id="page" title="{i18n>title}"> <content>

<t:TreeTable id="treeTable" selectionMode="None" enableColumnReordering="false"

rows="{ path : '/', parameters : {

countMode: 'Inline' ,

treeAnnotationProperties : {

hierarchyLevelFor : 'HierarchyLevel',

hierarchyNodeFor : 'NodeID',

hierarchyParentNodeFor : 'ParentNodeID',

hierarchyDrillStateFor : 'DrillState'} } }">

<t:columns>

<t:Column label="Societé / SIRET">

<t:template>

<Text text="{Description}" wrapping="false"/>

</t:template>

</t:Column>

JSON file declared in the controller.js:

sap.ui.define([ "./BaseController", "sap/ui/model/json/JSONModel", "../model/formatter", "sap/ui/model/Filter", "sap/ui/model/FilterOperator" ], function (BaseController, JSONModel, formatter, Filter, FilterOperator) { "use strict"; return BaseController.extend("t.tree.controller.Worklist", { formatter: formatter, /*

onInit : function () {

var oViewModel, iOriginalBusyDelay,

oTable = this.byId("table");

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 nodesModel = new sap.ui.model.json.JSONModel(); nodesModel.setData(data); this.getView().setModel(nodesModel); },

Thank you very much in advance,

Renata

[renata06]

controller.js
		onInit : function () {
			var oViewModel,
				iOriginalBusyDelay,
				oTable = this.byId("table");
			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 nodesModel = new sap.ui.model.json.JSONModel();
					nodesModel.setData(data);
					
					this.getView().setModel(nodesModel);
		},

xml.view:

<mvc:View controllerName="t.tree.controller.Worklist" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form" xmlns:t="sap.ui.table" xmlns:core="sap.ui.core">
<Shell id="shell">
	<App id="app">
	<pages>
	<Page id="page" title="{i18n>title}">
	<content>
	<t:TreeTable id="treeTable" selectionMode="None" enableColumnReordering="false"
		rows="{ path : '/', parameters : {countMode: 'Inline' , 
			treeAnnotationProperties : { 
				hierarchyLevelFor : 'HierarchyLevel', 
				hierarchyNodeFor : 'NodeID', 
				hierarchyParentNodeFor : 'ParentNodeID', 
				hierarchyDrillStateFor : 'DrillState'} } }">

	<t:columns>
		<t:Column label="Societé / SIRET">
			<t:template>
				<Text text="{Description}" wrapping="false"/>
			</t:template>
		</t:Column>