SAPUI5 TreeTable Control Data Binding

[Premnarayan]

binding data to sapui5 treetable control has various aspects, it is derived from sap.ui.table library unlike table control in sapui5 derived from sap.m and hence the differences in designing ui and and binding data.
there might be various data format you would be getting from your data source (service url), it can be flat data structure where you would get data in flat object property format, and other would be node structured format, in this format data for tree would be already structured and you just have to bind the data object to treetable control and rest control would take care for binding data in tree structure.

treetable in xml view

<t:TreeTable id="treeTable" visibleRowCount="5" enableColumnReordering="true" toggleOpenState = "toggleOpenState">

							<t:columns>

								<t:Column label="Description">

									<t:template>

										<Text text="{WBSParent}"/>

									</t:template>

								</t:Column>

								<t:Column label="WBSElement">

									<t:template>

										<Text text="{WBSElement}"/>

									</t:template>

								</t:Column>

							</t:columns>

						</t:TreeTable>

data binding for node structured data, this binding will be simple you just have to call the service, get the data and bind it, in below example i have provided sample for reading data from oData service and bind it.

	var serviceUrl1 = "/sap/opu/odata/sap/z_data_srv/";

			var oModel1 = new sap.ui.model.odata.ODataModel(serviceUrl1, true);

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

			var oTreeTable = this.getView().byId("treeTable").setModel(oJSModel1);



			/ *note that this oData service URL has NavDocs as expand node, treetable has capability to find this node from you service metadata and map it in tree structure, that is the reason below i can simply directly use bindRows to treetable. */



			oModel1.read(

				"/WBSDataSet?$filter=WBSElement eq " + "'" + WBSElement1 + "'" + "&$expand=NavDocs",

				null, [],

				true,

				function(oData, oResponse) {

                                          var data = oData.results;

                                          oJSModel1.setData(data);



				oTreeTable.bindRows({

					path: "/"

				});





},

				function(oError) {

					console.log(oError);

				}

			);

now from above you get the tree structure but there might be case you find EMPTY ROWs getting are added to each node of your tree structure,



these EMPTY ROWs are due to __metadata object available in the output.



In order to remove these empty rows you have to set the parameter for node object while binding, so bindRows would now look like this, refer above screen for object you can find node NavDocs in my example and that is the node we have to mention as parameter.

oTreeTable.bindRows({

					path: "/",

					parameters:{

					arrayNames:['NavDocs']}

				});

now you see empty rows get removed from treetable output.



Secondly if you have flat data structure returned for your data source, you have to manually add the child node based on the property you want to make parent child node structure.
for example if i consider same above service without NavDocs child node it becomes flat output data and now we have to make the parent child node manually in order to bind it to treetable.

below child container array and finding root node sections has to altered based on the requirement.

also below i have marked __metadata to empty in order to avoid empty rows in header data.

so marking __metadata empty and declare child node as parameter in bindRows for treetable will help removing empty rows.

	var arrHeader = oData.results;

					var flat = {};

					for (var i in arrHeader) {

						var key = 'id' + arrHeader[i].WBSElement;

						flat[key] = arrHeader[i];

						flat[key].__metadata = "";

					}

					//------------------------

					// add child container array to each node

					for (var j in flat) {

						flat[j].children = [];

					}



					// populate the child container arrays

					for (var k in flat) {

						var parentkey = 'id' + flat[k].WBSParent;

						var childkey = 'id' + flat[k].WBSElement;

						if (flat[parentkey] === flat[childkey]) {

							k++;

						} else {

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

						}

					}



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

					var root = [];

					for (var l in flat) {

						var parentkey1 = 'id' + flat[l].WBSParent;

						var childkey1 = 'id' + flat[l].WBSElement;



						if (flat[parentkey1] === flat[childkey1]) {



							root.push(flat[l]);



						}

					}

					var data = {

						root: root

					};

					oJSModel1.setData(data);

					oTreeTable.bindRows({

						path: "/root",

						parameters: {

							arrayNames: ['children']

						}

					});

Thanks, Prem