Add new rows in SAP UI5 TreeTable

[former_member214651]

Hi,

I am trying to implement a TreeTable in my SAPUI5 application following the article Simple Binding of TreeTable to JSON Data. I am able to successfully display the data in the application.

However, Now I need to add and remove records at a particular row. I tried searching in SDN without any success.

Attached are my View and Component.js files (view.txt) (component.txt)

Can someone help me in achieving this functionality?

Regards,

Poojith

[former_member460045 · Accepted solution]

Hi,

This is not completly free of bugs, but at least it works with insertion of new rows on both levels.

You will have to go over it again, but it works basically.

onAdd: function (oEvent) {

var oTable = this.getView().byId("TreeTable");
var oSelectedItem = oTable.getContextByIndex(oTable.getSelectedIndex()).getObject();
this._updateDataModel(oSelectedItem, oTable.getSelectedIndex());
},

_updateDataModel: function (oSelectedItem, Index) {

var oRoot = this.getView().getModel("NavNodesModel").getProperty("/nodeRoot");
var oNewData = {};
if (oSelectedItem.ParentNode) {
	oNewData = {
		"Name": "New",
		"Desc": "New",
		"ParentNode": oSelectedItem.ParentNode
		};
oRoot.children[oSelectedItem.ParentNode].children.push(oNewData);
} else 
    {
     oNewData = {
        "Name": "New",
	"Desc": "New",
	"ParentNode": ""
	};
oRoot.children.splice(Index, 0, oNewData);
}
this.getView().getModel("NavNodesModel").setProperty("/nodeRoot", oRoot);
},

Best regards

Johannes

[former_member214651 · Accepted solution]

Hi Johannes,

Thanks for quick reply. I will surely try and do the same changes. My requirement is to create new rows at a specified row and users will additionally be allowed to add their own structure of data.

Example: if the default display of TreeTable is as below

--Level 1

---Level 1.1

---Level 1.2

--Level 2

--Level 3

Users should be allowed to create new elements under Level 2 or 3. Also, they can create new elements Levels like below

--Level 1

---Level 1.1

---Level 1.2

--Level 2

--Level 3

--Level 4

---Level 4.1

---Level 4.2

Do let me know if you need any further information.

Regards,
Poojith

[former_member460045 · Accepted solution]

Hi,

above code can add rows on the first level on the selected row, but on second level only at the of the selection. So it would be:

-Level 1
--Level 1.1 <--- add here, its added as 1.3
--Level 1.2
-Level 2<--- add here, its added as 3
--Level 2.1
--Level 2.2
-Level 2
--Level 2.1
--Level 2.2
-Level 2
--Level 2.1
--Level 2.2

Best regards

Johannes

[former_member214651 · Accepted solution]

Hi Johannes,
Thanks for the information. The code worked worked perfectly fine for most of my requirement. However, I tried making additional changes to accommodate the scenario which I had explained in my previous reply.

Once a new row is added, if the object type is changed to "Node", then the add operation must result in a row within the node. However, the changes which I performed does not work.

Attached are my updated code for View, Controller and Component js files. Kindly let me know if my approach needs modifications?

if(oSelectedItem.OType === "Node"){//Trying to add a new child
	oNewData = {
		"Name": "New",
		"Desc": "New",
		"OType": "",
		"CType": "",
		"ParentNode": oSelectedItem.Name,
		"children":[]
	};
	oRoot.children[oSelectedItem.ParentNode].push(oNewData);//Get an error when executed
}

Regards,
Poojith M V

view.txt; controller.txt

[former_member214651 · Accepted solution]

Hi Johannes,

I tried making few modifications in the view wherein each row of the treetable has a dropdown which allows the user to decide if the entry would be a element or a node. If the entry is selected as a row, then it would allow sub-elements to be added.

In controller, I have managed to also check if the dropdown value is set to "node" and performed the required code to add it as an entry. However, I get an error "unable to push record to the element "children" : undefined". I had also attached my code in my earlier reply.

Please could you let me know if the code needs any further changes?

Thanks again for the information.

Regards,

Poojith