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

[Former Member]

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.

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.

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

[meriton]

Hei

I also would like an answer for this if there are any..? My solution/workaround for this was adding tap function to combobox.

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);

				oThisController.oContractDropdown.ontap = function (oEvent) {
					if (oEvent.originalEvent.originalEvent._sapui_handledByControl) {
						//filter again here
					}
				};
			}

[AdrDen]

Hi Meriton, I think your solution is a bit incomplete and ontap event behave unpredictable for me.

I had to extend ComboBox in order to make it working. Now it destroys current items before opening a ComboBox.

XML:

<custom:customComboBox items="{ path: '/EntitySet', templateShareable: true, suspended: true }" selectedKey="{SelectedKey}"
 loadItems=".onLoadComboBoxItems($event, ${Filter1}, ${Filter2}, ${Filter3})">

Custom Control:

sap.ui.define(["sap/m/ComboBox"], function (ComboBox) { "use strict";
 return ComboBox.extend("customComboBox", { 
   loadItems: function () { 
     if (this._oSuggestionPopover) { 
       this._oSuggestionPopover.destroy(); 
       this._oSuggestionPopover = null; 
     } 
     this.destroyItems(); 
     ComboBox.prototype.loadItems.apply(this, arguments); 
   }, 
   renderer: {} 
  });
}); 

Load Items event:

onLoadComboBoxItems: function (oEvent, sFilter1, sFilter2, sFilter3) { 
  var oComboBoxBinding = oEvent.getSource().getBinding("items"); 
  var oFilter = [ 
    new Filter("Filter1", sap.ui.model.FilterOperator.EQ, sFilter1), 
    new Filter("Filter2", sap.ui.model.FilterOperator.EQ, sFilter2), 
    new Filter("Filter3", sap.ui.model.FilterOperator.EQ, sFilter3) 
  ];
 oComboBoxBinding.filter(oFilter); oComboBoxBinding.resume(); 
},

[abdul_kareem]

Hello Naresh,

Did you resolve this issue ??

Thanks and Regards

Abdul Kareem