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

[Former Member]

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