SAPUI5 TreeTable - Node Extensive Behavior

Question

Problem:

I am trying to keep the nodes in TreeTable expanded when I add rows at runtime. The default behavior of a TreeTable occurs when something happens to it, it is displayed again, and all nodes are reset.

The API provides only ways to expand the first level, but I also like to expand the nodes of the lower level. How can i achieve this?

Before adding a line:

After adding the line:

Expectation:

[EDIT]

I already tried to get the correct behavior using expand (iRowIndex), but in my case the life cycle of this TreeTable (adding content, getting re-registration) does not help.

What am I doing:

Drag & Drop. TreeTable, . , + Drag & Drop, , .

TreeTable, . setExpandFirstLevel (true) " .

Answer 1

, TreeTable expand(iRowIndex),

---

EDIT. (. ), , rowID - DOM. , drag/drop, - node node, .
, expand(rowIndex) , ( . NB2 )

NB1: , " node" "drop".

NB2: -, expand: . ...

sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({
            data : [
                { 
                    name  : "node1", 
                    description : "Lorem ipsum dolor sit amet",
                    data : [
                        { 
                            name : "node1.1", 
                            description : "Cras pretium nisl ac ex congue posuere"
                        },
                        { 
                            name : "node1.2", 
                            description : "Consectetur adipiscing elit",
                            data: [
                                { 
                                    name : "node1.2.1",
                                    description : "Maecenas accumsan ipsum diam"
                                }
                           ]
                        },
                        { 
                            name : "node1.3", 
                            description : "Sed tristique diam non imperdiet commodo"
                        },
                        { 
                            name : "node1.4", 
                            description : "Consectetur adipiscing elit",
                            data: [
                                { 
                                    name : "node1.4.1",
                                    description : "Maecenas accumsan ipsum diam",
                                    data: [
                                        { 
                                            name : "node1.4.1.1",
                                            description : "Maecenas accumsan ipsum diam",
                                            data: [
                                                { 
                                                    name : "node1.4.1.1.1",
                                                    description : "Maecenas accumsan ipsum diam",
                                                    data: [
                                                        { 
                                                            name : "node1.4.1.1.1.1",
                                                            description : "Maecenas accumsan ipsum diam"
                                                        }
                                                   ]
                                                }
                                           ]
                                        }
                                   ]
                                }
                           ]
                        },
                        { 
                            name : "node1.5", 
                            description : "Sed tristique diam non imperdiet commodo"
                        },
                        { 
                            name : "node1.6", 
                            description : "Consectetur adipiscing elit",
                            data: [
                                { 
                                    name : "node1.6.1",
                                    description : "Maecenas accumsan ipsum diam"
                                }
                           ]
                        },
                        { 
                            name : "node1.7", 
                            description : "Sed tristique diam non imperdiet commodo"
                        },

                    ]
                },
            ]
        });
        this.getView().setModel(oModel);
    },

    onAfterRendering : function() {
        this._doExpandAll();
    },

    addNode : function(oEvent) {
        var oContext = oEvent.getSource().getBindingContext();
        var obj      = oContext.getObject();

        var oNew = { name : "New node", description : "New description"};

        if (!obj.data) obj.data = []; //if no child array, create empty one

        obj.data.push(oNew);

        this.getView().getModel().setProperty(oContext.getPath(), obj);

        this._doExpandAll();
    },

    _doExpandAll : function() {
        var oTTbl = this.getView().byId("tbl");
        for (var i=0; i<oTTbl.getRows().length; i++) {
            oTTbl.expand(i);
        }
    }
});
  
var app = new sap.m.App({});

var oView = sap.ui.xmlview({
    viewContent: jQuery("#view1").html()
});

app.addPage(oView);
app.placeAt("uiArea");

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns:t="sap.ui.table"
      xmlns="sap.ui.commons"
      xmlns:mvc="sap.ui.core.mvc" >
        <t:TreeTable id="tbl" rows="{path:'/',parameters:{arrayNames:['data']}}" visibleRowCount="10">
            <t:columns>
                <t:Column>
                    <t:label><Label text="name" /></t:label>
                    <t:template><TextView text="{name}" /></t:template>
                </t:Column>
                <t:Column>
                    <t:label><Label text="description" /></t:label>
                    <t:template><TextView text="{description}" /></t:template>
                </t:Column>
                <t:Column>
                    <t:label><Label text="" /></t:label>
                    <t:template><Button text="Add child node" press="addNode"/></t:template>
                </t:Column>
            </t:columns>
        </t:TreeTable>
    </mvc:View>
</script>

<div id="uiArea"></div>

Hide result