CODEWITHSUNDEEP
javascriptsapui5
danpop
danpop

Reputation: 977

SAPUI5 TreeTable select children when parent is selected

I have a SAPUI5 TreeTable used for filtering on category. What I want is that when a parent category is selected, all the children should be selected and when the parent is deselected it's children should be deselected, no matter if they are collapsed or not. The problem is that I cannot use indices because apparently they differ based on collapsed items. 

            <t:TreeTable
                id="treeCategoriesFilterItem"
                    rows="{path:'tree_categories>/', parameters: {arrayNames:['categories']}}"
                    selectionMode="MultiTogle"
                    enableSelectAll="false"
                    ariaLabelledBy="title"
                    visibleRowCountMode="Fixed"
                    rowSelectionChange="onCategoriesRowSelectionChange"
                    >
                <t:columns>
                    <t:Column width="100%">
                        <Label text="{i18n>label.ticket.category}"/>
                        <t:template>
                            <Text text="{tree_categories>name}"/>
                        </t:template>
                    </t:Column>
                </t:columns>
            </t:TreeTable>

Upvotes: 1

Views: 6216

Answers (1)

Inizio
Inizio

Reputation: 2256

You can achieve it by

1.Once the tree table data is received oEvent.getSource().oKeys will have the parent and child information, save this in Table custom data. This data help to get the childs of the selected parent.

var oRowsBinding = oTable.getBinding("rows");
oRowsBinding.attachDataReceived(function(oEvent){
   var oKeys = oEvent.getSource().oKeys;//will have the parent and child information.
    oTable.data("keys", oKeys);//store the key values
}.bind(this));

2. When the parent is selected get the binding path of the parent and loop all the childs binding path and update the corresponding property which select the child items using model setProperty(). Same goes to deselect it.

onSelection: function(oEvent){
    var oSource = oEvent.getSource(); 
    bPCBEnabled = oSource.getSelected(),
    oRow =  oSource.getParent(),
    oTable = oRow.getParent(),
    iHierarchyLevel = oRow.getBindingContext("oModel").getObject().HierarchyLevel; 
    if(iHierarchyLevel === 1 && oTable && oTable.data() && oRow){
        if(bPCBEnabled)//expand/collapse parent
            oTable.expand(oRow.getIndex());
        else
            oTable.collapse(oRow.getIndex());

        var oKeys = oTable.data().keys,
        sPath = oRow.getBindingContext("oModel").sPath,//parent binding path
        oChilds = oKeys[sPath.replace("/", "")];
        for(var iKey in oChilds){
            sChildPath = "/" +oChilds[iKey],//child binding path
            oModel = oTable.getModel("oModel"),
            oModel.setProperty(sChildPath + "/Enabled", bPCBEnabled);//change to your corresponding model property which tells is selected/deselected 
        }
    }
}

Upvotes: 2

Related Questions