Community
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Error binding in sap.ui.table Tree Table

06-29-2019 5:06 PM
renata06 Explorer
3009 views 7 comments
SAP Managed Tags
Subscribe

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

Know the answer?

Help others by sharing your knowledge.

Answer

Need more details?

Request clarification before answering.

Show replies
Show replies

Accepted Solutions (0)

Answers (6)

Answers (6)

renata06
Explorer
‎2019 Jul 01 9:05 AM

Hello,

Good news!!!

Found the solution for this problem by inserting those 3 properties:

useServersideApplicationFilters: false, 
operationMode:'Client', 
autoExpandMode:'Bundled',
t:TreeTable id="treeTable" selectionMode="None" enableColumnReordering="false" 
	rows="{ path : '/DSNStatutSet', 
		parameters : {
			useServersideApplicationFilters: false, 
			operationMode:'Client', 
			autoExpandMode:'Bundled',
			countMode: 'Inline',
		treeAnnotationProperties : { 
			hierarchyLevelFor : 'HierarchyLevel', 
			hierarchyNodeFor : 'NodeID', 
			hierarchyParentNodeFor : 'ParentNodeID', 
			hierarchyDrillStateFor : 'DrillState'} } }">

Good bye!

Renata

Show replies
Show replies
former_member435529
Participant
‎2021 Aug 23 9:47 PM
0 Likes

Hi Renata,

How did you find these 3 properties above?.

Thanks,

Javier

Former Member
‎2020 Jan 16 9:40 AM
0 Likes

Hello,

You can try like below code.

Because I was having same flat structure to form a treetable.

CONTROLLER:-

in your Success method write like

success: function (oData) {

var data = oData.QuestionTree.results;

var flat = {};

for (var i = 0; i < data.length; i++) {

var key = 'id' + data[i].Id;

flat[key] = data[i];

flat[key].__metadata = "";

}

// child container array to each node

for (var i in flat) {

flat[i].children = []; // add children container

}

// populate the child container arrays

for (var i in flat) {

var parentkey = 'id' + flat[i].ParentId;

if (flat[parentkey]) {

flat[parentkey].children.push(flat[i]);

}

}

// find the root nodes (no parent found) and create the hierarchy tree from them

var root = [];

for (var i in flat) {

var parentkey = 'id' + flat[i].ParentId;

if (!flat[parentkey]) {

root.push(flat[i]);

}

}

var oJsonModel = new sap.ui.model.json.JSONModel();

oJsonModel.setData(root);

treeTable.setModel(oJsonModel);

treeTable.bindRows({

path: "/",

parameters: {

arrayNames: ['children'],

numberOfExpandedLevels: length

}

});

}

VIEW:-

<t:TreeTable id="treeTable" selectionMode="MultiToggle" enableSelectAll="false" ariaLabelledBy="title" visibleRowCountMode="Auto" collapseRecursive="false">

<t:columns>

<t:Column width="20%">

<m:Label text="Description"/>

<t:template>

<m:Text text="{Title}"/>

</t:template>

</t:Column>

<t:Column width="10%">

<m:Label text="DC"/>

<t:template>

<m:Text text="{DiagnoseCode}"/>

</t:template>

</t:Column>

</t:columns>

</t:TreeTable>

Thanks

Show replies
Show replies
renata06
Explorer
‎2019 Jun 30 4:32 PM
0 Likes

Hello again,

Any news here?

Thanks,

Renata

Show replies
Show replies
renata06
Explorer
‎2019 Jun 29 7:07 PM
0 Likes

Hello again guys,

I will present another perspective of the issue:

The binding data it's made from an oData service:

<feed xmlns="
<id></id>
<title type="text">...</title>
<updated>2019-06-29T17:53:58Z</updated>
-<author>
<name/>
</author>
<link href=".../" rel="self" title="DSNStatutSet"/>
-<entry>
<id>...</id>
<title type="text">...(BukrsSiret='004',NodeID='1')</title>
<updated>2019-06-29T17:53:58Z</updated>
<category term="..."/>
<link href="...(BukrsSiret='004',NodeID='1')" rel="self" title="..."/>
-<content type="application/xml">
-<m:properties xmlns:m="...
<d:BukrsSiret>004</d:BukrsSiret>
<d:NodeID>1</d:NodeID>
<d:Normal>accept,green</d:Normal>
<d:ParentNodeID/>
<d:DrillState>leaf</d:DrillState>
<d:NormalLed>accept,green</d:NormalLed>
<d:HierarchyLevel>0</d:HierarchyLevel>
<d:NormalTooltip>Job lancé le 14/06/2019 à 10:00 et terminñe avec succés le 14/06/2019 à 12:00</d:NormalTooltip>
<d:Neant>accept,green</d:Neant>
<d:NeantLed>accept,green</d:NeantLed>
<d:NeantTooltip>Job lancé le 14/06/2019 à 12:02 et terminñe avec succés le 14/06/2019 à 12:32</d:NeantTooltip>
<d:Final>warning2,orange</d:Final>
<d:FinalLed/>
<d:FinalTooltip>Job lancé le 14/06/2019 à 12:35 en cours d´exectuion</d:FinalTooltip>
<d:Envoi/>
<d:EnvoiLed/>
<d:EnvoiTooltip/>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT12H06M40S</d:Time>
<d:User>@ANTONIOM</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
-<entry>


<id>...</id>
<title type="text">...(BukrsSiret='009',NodeID='2')</title>
<updated>2019-06-29T17:53:58Z</updated>
<category term=".../>
<link href="...(BukrsSiret='009',NodeID='2')" rel="self" title="..."/>
-<content type="application/xml">
-<m:properties .>
<d:BukrsSiret>009</d:BukrsSiret>
<d:NodeID>2</d:NodeID>
<d:Normal>notification,red</d:Normal>
<d:ParentNodeID/>
<d:DrillState>expanded</d:DrillState>
<d:NormalLed>notification,red</d:NormalLed>
<d:HierarchyLevel>0</d:HierarchyLevel>
<d:NormalTooltip>Job lancé le 13/06/2019 à 10:00 et interrompu le 13/06/2019 à 10:05</d:NormalTooltip>
<d:Neant/>
<d:NeantLed/>
<d:NeantTooltip/>
<d:Final/>
<d:FinalLed/>
<d:FinalTooltip/>
<d:Envoi/>
<d:EnvoiLed/>
<d:EnvoiTooltip/>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT03H55M00S</d:Time>
<d:User>@ANTONIOM</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
-<entry>


<id>...(BukrsSiret='012',NodeID='3')</id>
<title type="text">...(BukrsSiret='012',NodeID='3')</title>
<updated>2019-06-29T17:53:58Z</updated>
<category term="...
<link href="...(BukrsSiret='012',NodeID='3')" rel="self" title="DSNStatut"/>
-<content type="application/xml">
-<m:properties xmlns:m="...">
<d:BukrsSiret>012</d:BukrsSiret>
<d:NodeID>3</d:NodeID>
<d:Normal>accept,green</d:Normal>
<d:ParentNodeID/>
<d:DrillState>expanded</d:DrillState>
<d:NormalLed>accept,green</d:NormalLed>
<d:HierarchyLevel>0</d:HierarchyLevel>
<d:NormalTooltip>Job lancé le 14/06/2019 à 10:00 et terminñe avec succés le 14/06/2019 à 12:00</d:NormalTooltip>
<d:Neant>accept,green</d:Neant>
<d:NeantLed>accept,green</d:NeantLed>
<d:NeantTooltip>Job lancé le 14/06/2019 à 12:02 et terminñe avec succés le 14/06/2019 à 12:32</d:NeantTooltip>
<d:Final>accept,green</d:Final>
<d:FinalLed>notification,red</d:FinalLed>
<d:FinalTooltip>Job lancé le 14/06/2019 à 12:32 et terminñe avec succés le 14/06/2019 à 12:35</d:FinalTooltip>
<d:Envoi>accept,green</d:Envoi>
<d:EnvoiLed>notification,red</d:EnvoiLed>
<d:EnvoiTooltip>Job lancé le 14/06/2019 à 12:40 et terminñe avec succés le 14/06/2019 à 12:42</d:EnvoiTooltip>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT12H06M40S</d:Time>
<d:User>@PABLOC</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
-<entry>


<id>...(BukrsSiret='009123456789',NodeID='4')</id>
<title type="text">...(BukrsSiret='009123456789',NodeID='4')</title>
<updated>2019-06-29T17:53:58Z</updated>
<category term="...
<link href="...(BukrsSiret='009123456789',NodeID='4')" rel="self" title="DSNStatut"/>
-<content type="application/xml">
-<m:properties xmlns:m="...">
<d:BukrsSiret>009123456789</d:BukrsSiret>
<d:NodeID>4</d:NodeID>
<d:Normal/>
<d:ParentNodeID>2</d:ParentNodeID>
<d:DrillState>leaf</d:DrillState>
<d:NormalLed>notification,red</d:NormalLed>
<d:HierarchyLevel>1</d:HierarchyLevel>
<d:NormalTooltip/>
<d:Neant/>
<d:NeantLed/>
<d:NeantTooltip/>
<d:Final/>
<d:FinalLed/>
<d:FinalTooltip/>
<d:Envoi/>
<d:EnvoiLed/>
<d:EnvoiTooltip/>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT03H55M00S</d:Time>
<d:User>@ANTONIOM</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
-<entry>


<id>...(BukrsSiret='009123466789',NodeID='5')</id>
<title type="text">...(BukrsSiret='009123466789',NodeID='5')</title>
<updated>2019-06-29T17:53:58Z</updated>
<category term="...
<link href="...(BukrsSiret='009123466789',NodeID='5')" rel="self" title="DSNStatut"/>
-<content type="application/xml">
-<m:properties xmlns:m="...">
<d:BukrsSiret>009123466789</d:BukrsSiret>
<d:NodeID>5</d:NodeID>
<d:Normal/>
<d:ParentNodeID>2</d:ParentNodeID>
<d:DrillState>leaf</d:DrillState>
<d:NormalLed>notification,red</d:NormalLed>
<d:HierarchyLevel>1</d:HierarchyLevel>
<d:NormalTooltip/>
<d:Neant/>
<d:NeantLed/>
<d:NeantTooltip/>
<d:Final/>
<d:FinalLed/>
<d:FinalTooltip/>
<d:Envoi/>
<d:EnvoiLed/>
<d:EnvoiTooltip/>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT03H55M00S</d:Time>
<d:User>@ANTONIOM</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
-<entry>


<id>...(BukrsSiret='01212346897',NodeID='6')</id>
<title type="text">...(BukrsSiret='01212346897',NodeID='6')</title>
<updated>2019-06-29T17:53:58Z</updated>
<category term="...
<link href="...(BukrsSiret='01212346897',NodeID='6')" rel="self" title="..."/>
-<content type="application/xml">
-<m:properties xmlns:m="...
<d:BukrsSiret>01212346897</d:BukrsSiret>
<d:NodeID>6</d:NodeID>
<d:Normal/>
<d:ParentNodeID>3</d:ParentNodeID>
<d:DrillState>leaf</d:DrillState>
<d:NormalLed/>
<d:HierarchyLevel>1</d:HierarchyLevel>
<d:NormalTooltip/>
<d:Neant/>
<d:NeantLed/>
<d:NeantTooltip/>
<d:Final/>
<d:FinalLed>notification,red</d:FinalLed>
<d:FinalTooltip/>
<d:Envoi/>
<d:EnvoiLed/>
<d:EnvoiTooltip/>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT12H06M40S</d:Time>
<d:User>@PABLOC</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
-<entry>


<title type="text">...(BukrsSiret='01212346899',NodeID='7')</title>
<updated>2019-06-29T17:53:58Z</updated>


<link href="...(BukrsSiret='01212346899',NodeID='7')" rel="self" title="..."/>
-<content type="application/xml">
-<m:properties xmlns:m="
<d:BukrsSiret>01212346899</d:BukrsSiret>
<d:NodeID>7</d:NodeID>
<d:Normal/>
<d:ParentNodeID>3</d:ParentNodeID>
<d:DrillState>leaf</d:DrillState>
<d:NormalLed/>
<d:HierarchyLevel>1</d:HierarchyLevel>
<d:NormalTooltip/>
<d:Neant/>
<d:NeantLed/>
<d:NeantTooltip/>
<d:Final/>
<d:FinalLed/>
<d:FinalTooltip/>
<d:Envoi/>
<d:EnvoiLed>notification,red</d:EnvoiLed>
<d:EnvoiTooltip/>
<d:ChildrenLoaded/>
<d:Switch/>
<d:Date m:null="true"/>
<d:Time>PT12H06M40S</d:Time>
<d:User>@PABLOC</d:User>
<d:SwitchVisible>X</d:SwitchVisible>
</m:properties>
</content>
</entry>
</feed>

I found an information, I don't know if this could be the cause...

If the oData service is not supporting the query option $inlinecount=allpages, then this could affect the parent-child structure from the sap.ui.table Tree Table?

As I have defined in the XML view, the tree table's countMode property is "Inline", so if the oData service does not have the property inlinecount, this could be the casue?

<t:TreeTable id="treeTable" selectionMode="None" enableColumnReordering="false"
		rows="{ path : '/', parameters : {countMode: 'Inline' ,

odata.png

Thank you in advance,

Renata

Show replies
Show replies
renata06
Explorer
‎2019 Jun 29 4:15 PM
0 Likes

And this is how it look binded in the table

display.png

Show replies
Show replies
renata06
Explorer
‎2019 Jun 29 4:13 PM
0 Likes 
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>
Show replies
Show replies
Ask a Question