Skip to Content
Author's profile photo Premnarayan Patidar

SAPUI5 TreeTable Control Data Binding

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

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Could I add tree table in master view of splitapp & click on each names to navigate data in detail view using local Json??? Please any one help me.....

      Author's profile photo Premnarayan Patidar
      Premnarayan Patidar
      Blog Post Author

      Hi Murmu,

      similar functionality is available in 3D Viewer control of SAPUI5, you need to just explore it's library and check how navigation is taking place in this control.

      Thanks, prem

      Author's profile photo Nik Viskunov
      Nik Viskunov

      Thank you!

      Author's profile photo Pankaj valecha
      Pankaj valecha

      Hi Prem,

       

      If we have data structure like NavDoc : {results: [object1,object2,object]}.

      is it possible to add parameter - arraynames {NavDoc/results} for correct binding?

       

      Regards,

      Pankaj V