Skip to Content
1
Jun 02, 2022 at 08:15 PM

Combobox dropdown binding problem inside sap.ui.table TreeTable (while Scrolling)

752 Views Last edit Jun 02, 2022 at 08:21 PM 2 rev

Hello

I am facing a peculiar issue when trying to use sap.m.ComboBox dropdown inside sap.ui.table.TreeTable, especially when I scroll the treetable.

View1.view.xml

<t:TreeTable id="idTreeTable" selectionMode="Single" 
	rows="{ path:'/data', parameters: { 
            numberOfExpandedLevels: 3, 
            arrayNames:['baseparts','parts','suppliers']},
			sorter: {
              path: 'suppCode'
            }
          }" visibleRowCountMode="Auto" enableColumnReordering="false" rowSelectionChange="onPartSelected" expandFirstLevel="true" enableSelectAll="false" ariaLabelledBy="title">
	<t:columns>  
	
	 ..... //More columns

     <t:Column width="8%" >
        <t:label>
            <Label text="{i18n>TT_COL8_SUPPCODE}" wrapping="true" design="Bold"/>
        </t:label>
        <t:template>
            <Text text="{suppCode}" />
        </t:template>
     </t:Column>
     <t:Column width="12%" >
        <t:label>
            <Label text="{i18n>TT_COL9_BPO}" wrapping="true" design="Bold"/>
        </t:label>
        <t:template> 
            <ComboBox visible="{= !!${suppCode}}" value="{contractNumber}" showSecondaryValues="true" filterSecondaryValues="true"
				items="{path:'odSRM>/SupplierContractSet', length: 15000, suspended:true, templateShareable:false, events:{ dataReceived:'.onContractDataReceived'}}"  
				loadItems=".onLoadBPOsDropdown" change=".onContractChangeInTable">
                <customData><core:CustomData key="suppCode" value="{suppCode}"/></customData>
	        <items>
                    <core:ListItem key="{odSRM>Contractnumber}" text="{odSRM>Contractnumber}" additionalText="{odSRM>Description}"/>
                </items>
            </ComboBox>
        </t:template>
    </t:Column>	
	
	......	//More columns
	
	</t:columns>
</t:TreeTable>	<br>

Since dynamic filtering is not available in xmlview, I am using 'loadItems' event of combobox to lazily load the dropdown values as each combobox is filtered based on corresponding property 'suppCode' of the row context data. Combobox is directly binded to the v2.oDataModel entity 'SupplierContractSet'. Controller event function is as below:

//loadItems event function: Lazy load Contracts list in Table
onLoadBPOsDropdown: function(oEvent){
    oThisController.oContractDropdown = oEvent.getSource();
    let sSupplierCode = oThisController.oContractDropdown.data("suppCode");
    let aFilters=[];
    if(sSupplierCode){
        aFilters.push(new Filter("Suppliercode", "EQ", sSupplierCode))
    }
    oThisController.oContractDropdown.getBinding("items").filter(aFilters);        
},<br>

The TreeTable output looks like below with Comboboxes visible at 3rd level of heirarchy.

image.png

Now lets say if I click on combobox dropdown of 3rd row as seen above which displays dropdown values based on filter suppCode='08850AB' and then I scroll down to say, 10th row which has another combobox in same column and if it comes up at the exact same position as previous 3rd row combobox, then the 10th row combobox somehow still retains the 3rd row combobox dropdown values as seen in below screenshot. When I click on combobox, it does not even call the 'loadItems' event again as it is needed to filter the dropdown values based on suppCode='17114GC' which returns a different set of data.

image.png

It's as if the sap.ui.table.Treetable rows are static yet somehow scrollable, with the combobox not changing its position, but only its property binding 'value' changes based on row context data.

Now I would like to at least have the 'loadItems' event called every time the user types in the ComboBox or clicks on it, so that every time the dropdown values would get filtered based on the corresponding suppCode property.

If anyone can help here or provide an alternate solution / workaround, it would be greatly appreciated!

Cheers,

Naresh

Attachments

image.png (99.4 kB)
image.png (100.7 kB)