Sapui5 CustomTreeItem How can i add an item to the tree Structure

Question

Im facing an issue in CustomTreeItem . Im able to display the tree structure from JSON Successfully. But im facing an issue to add the Data manually on Click of Add Button.

If you see the above image if i hit on + Button i need to add one Tile in the below. But im able not able to add and im not seeing any error in the console too.. Below is my code...

XML ====`

<Tree items="{selModel>/}" id="Tree" class="sapUiTinyMarginTop tilesClass selTree">
                                    <CustomTreeItem id="treeItem" detailPress="pressCustomTreeItem">
                                        <VBox class="customSelTile" id="customSelTile">
                                            <HBox>
                                                <VBox class="sapUiTinyMarginTop customTxts">
                                                    <Label class="sapUiSmallMarginBegin headTxtFont" text="{selModel>text}"/>
                                                    <Label class="sapUiSmallMarginBegin subHeadTxtFont" text="{selModel>subheader}"/>
                                                </VBox>
                                                <Button class="sapUiSmallMarginBegin sapUiTinyMarginTop" press="addTile" icon="sap-icon://add"/>
                                                <Button class="sapUiTinyMarginBegin sapUiTinyMarginTop" press="removeTile" icon="sap-icon://less"/>
                                            </HBox>
                                        </VBox>
                                    </CustomTreeItem>
                                </Tree>

`

Controller ::

var selOrgJson = [{
            "text": "Department",
            "subheader": "Production Management JP",
            "personName":"Kuwahara Atushi",
            "nodes": [{
                "text": "Department",
                "subheader": "Production JP",
                "personName":"Kawasaki Takeshi"
            }, {
                "text": "Department",
                "subheader": "Planning Scheduling JP",
                "personName":"Fukuyama Sumire",
                "nodes": [{
                    "text": "Department",
                    "subheader": "Planning Operations",
                    "personName":"Sakata Junko"
                }]
            }, {
                "text": "Department",
                "subheader": "Sales Office, North East Japan",
                "personName":"Emoto Hloronori"
            }, {
                "text": "Department",
                "subheader": "Sales Office, South East Japan",
                "personName":"Suzuki Aya"
            }, {
                "text": "Department",
                "subheader": "Partner Sales JP",
                "personName":"Kuwahara Atushi"
            }]
        }];

        var selModel = new sap.ui.model.json.JSONModel();
        selModel.setData(selOrgJson);
        this.getView().setModel(selModel, "selModel");

addTile: function (oEvt) {
        var vBox = new sap.m.VBox();
        vBox.addStyleClass("customSelTile");
        var hBox = new sap.m.HBox();
        var insideVBox = new sap.m.VBox();
        insideVBox.addStyleClass("sapUiTinyMarginTop customTxts");
        var headInput = new sap.m.Input({
            type: "Text"
        });
        var subInput = new sap.m.Input({
            type: "Text"
        });
        insideVBox.addItem(headInput);
        insideVBox.addItem(subInput);
        hBox.addItem(insideVBox);
        vBox.addItem(hBox);
        var button1 = new sap.m.Button({
            press: this.addTile,
            icon: "sap-icon://add"
        });
        var button2 = new sap.m.Button({
            press: this.removeTile,
            icon: "sap-icon://less"
        });
        hBox.addItem(button1);
        hBox.addItem(button2);
        vBox.addItem(hBox);

    },

Can some one please help how can i add a tile on Click of Add button to the CustomTreeItem . If my above approach is wrong in controller means then Please help me with some alternate solution .

Thank you in advance..

Answer 1

Fixed the issue with below piece of code..

addTile: function (oEvt) {

        var _oItem = oEvt.getSource().getParent().getParent().getParent();
        var _sBindingPath = _oItem.getBindingContextPath();
        var _oModel = this.getView().getModel("selModel");
        var aData = _oModel.getProperty(_sBindingPath);
        var _oChildNodes = [];
        if (aData.nodes !== undefined) {
            _oChildNodes = aData.nodes;
        } else {
            aData.nodes = _oChildNodes;
        }

        var newData = {
            "text": "",
            "subheader": ""
       }

Thank you