sapui5 CustomTreeItem How can i delete an item in the Tree Structure

Question

I have an issue in deleting an object in Nested JSON Array Structure.

If you see the above pic, User has an option to add an Item or Delete an Item.

You can delete an item(it might be parent or child). If you are deleting parent Item then corresponding children should also get deleted. If you delete last Item(Tile3) only that item should get deleted.

Below is the code im trying with ..

XML::

<Tree items="{path : 'selModel>/',parameters: { numberOfExpandedLevels: 4}}" toggleOpenState="expandCollapseTree" id="Tree" class="sapUiTinyMarginTop tilesClass selTree">
    <dragDropConfig>
        <dnd:DragDropInfo sourceAggregation="items" targetAggregation="items" dragStart="onDragStart" drop="onDrop"/>
    </dragDropConfig>
    <CustomTreeItem id="treeItem" detailPress="pressCustomTreeItem">
        <VBox class="customSelTile" id="customSelTile">
            <HBox>
                <HBox width="100%">
                    <VBox visible="{= ${selModel>enabled} ? false: true }" class="sapUiTinyMarginTop customTxts">
                        <Label class="sapUiSmallMarginBegin headTxtFont" text="{selModel>text}"/>
                        <Label class="sapUiSmallMarginBegin subHeadTxtFont" text="{selModel>subheader}"/>
                    </VBox>
                    <VBox visible="{selModel>enabled}" class="sapUiTinyMarginTop customTxts">
                        <Input class="sapUiSmallMarginBegin headTxtFont" value="{selModel>text}"/>
                        <Input class="sapUiSmallMarginBegin subHeadTxtFont" value="{selModel>subheader}"/>
                    </VBox>
                </HBox>
                <Button class="sapUiTinyMarginBegin sapUiTinyMarginTop" press="addTile" icon="sap-icon://add"/>
                <Button class="sapUiTinyMarginBegin sapUiTinyMarginTop sapUiTinyMarginEnd" press="removeTile" icon="sap-icon://less"/>
            </HBox>
        </VBox>
    </CustomTreeItem>
</Tree>

Controller ::

removeTile: function (oEvt) {

    var _oItem = oEvt.getSource().getParent().getParent().getParent();
    var _sBindingPath = _oItem.getBindingContextPath();
    var _oModel = this.getView().getModel("selModel");
    var aData = _oModel.getProperty(_sBindingPath);
}

In aData im able to get the selected object data. But how can i delete the selected object and again form the updated JSON data in the model?

Can some one please help me with any solution?

Thank you in advance..

user2644620 user2644620 · Accepted Answer · 2019-05-07T15:23:00

Fixed the issue with below code...

removeTile: function(oEvt) {
    var _oItem = oEvt.getSource().getParent().getParent().getParent();
    var _sBindingPath = _oItem.getBindingContextPath();
    var _oModel = this.getView().getModel("selModel");
    var _aDataToDelte = _oModel.getProperty(_sBindingPath);
    var oModelData = _oModel.getData();
    this._deleteRecord(oModelData, _aDataToDelte);
    _oModel.setData(oModelData);
},
_deleteRecord: function(items, record) {
    if (items !== undefined) {
        for (var i = 0; i < items.length; i++) {
            if (items[i] === record) {
                items.splice(i, 1);
                break;
            } else {
                this._deleteRecord(items[i].nodes, record);
            }
        }
    }
}

sapui5 CustomTreeItem How can i delete an item in the Tree Structure

1 Answers