SAPUI5 TreeTable rendering issue

Question

I have created a case which has one xml view. This view contains a treetable with two columns

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
        controllerName="sdf_test.App" xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns:t="sap.ui.table" xmlns:var="sap.ui.comp.variants" xmlns:commons="sap.ui.commons"
        xmlns:layout="sap.ui.layout">
    <App>
        <pages>
            <Page>
                <content>
                    <t:TreeTable id="mainPageTable" rowHeight="40"
                        enableColumnReordering="false" visibleRowCount="14">
                        <t:columns>
                            <!-- <t:Column> <CheckBox /> </t:Column> -->
                            <t:Column sortProperty="landscapeName" width="400px">
                                <Label text="sample" />
                                <t:template>
                                    <Link text="{name}" enabled="{enabled}"/>
                                </t:template>
                            </t:Column>
                            <t:Column>
                                <Label text="Status" />
                                <t:template>
                                    <Text text="{nodeName}" />
                                </t:template>
                            </t:Column>
                        </t:columns>
                    </t:TreeTable>
                </content>
            </Page>
        </pages>
    </App>
</core:View>

I populate this treetable in the controller like below:

    onInit : function() {
                            var that = this;
                            var oView = that.getView();
                            var mainPageTable = oView.byId("mainPageTable");
                             var oData = {
                                        root:{
                                            0: {
                                                name: "item1",
                                                enabled: true,
                                                0: {
                                                    name: "subitem1-1",
                                                    enabled: true,
                                                },
                                                1: {
                                                    name: "subitem1-2",
                                                    enabled: false,
                                                }
                                            },  
                                        }
                                };
    var oModel = new sap.ui.model.json.JSONModel();
                            oModel.setData(oData);
                            mainPageTable.setModel(oModel);
                            mainPageTable.bindRows("/root");
        }
});

The problem is first time I open the "item1" root branch I can see one item enabled and second one disabled. but if I close the "item1" and open it again both fields become disabled. like below pictures.

First time:

second time:

Answer 1

Ok the answer is to use toggleOpenState function for treetable and then set rerender() each time this method is called.

<t:TreeTable toggleOpenState="toggleOpenState"/>


toggleOpenState : function(){

   this.byId("mainPageTable").rerender();
}