Dependent Select in sap.m.Table

[AKMishra]

Respected Experts,

I need a help from you.

A table consists of multiple columns, in which two of them are select where the other,i.e. Region is dependent on the first, i.e. Country.

Until Row 1 all is fine. When row 2 is added, sometimes the Region of row 1 shows the Region of row 2, similar to 2nd pic. above, the row 3 Region got changed, so do the select items.

Can you please help me out to know where am I going wrong?

I have used the below code:

in Table:

<Select
    selectedKey="{tempModel>Country}"
    change='onSelectTableCountry'
    items="{path:'/CountrySet', templateShareable:'true'}">
    <core:Item key="{Land1}" text="{Landx50}"/>
</Select>
<Select
    selectedKey="{tempModel>Region}"
    items="{path:'/RegionSet', templateShareable:'true'}">
    <core:Item key="{Bland}" text="{Bezei}"/>
</Select> 

in Json Model:

"AddressSet": [{
      "Country"       :"",
      "Region"        :""
}],
"addAddress":{
      "Country"       :"",
      "Region"        :""
}

in Controller:

onSelectTableCountry: function(oEvent){
	var aSelectedCell   = oEvent.getSource().getParent().getCells();
	var SelectedCountry = aSelectedCell[6].getSelectedKey();
	var oBinding        = oEvent.getSource().getParent().getCells()[7].getBinding('items');
	oBinding.filter([ new Filter([
		new Filter({
			path: 'Bland',
			operator: FilterOperator.EQ,
			value1: SelectedCountry
                })
         ])]);
},

handleIdentifyAdd: function(oEvent){
       var aTableData = this.tempModel.getProperty('/AddressSet');
       var pData         = jQuery.extend(true, {}, this.tempModel.getProperty('/addAddress'));
       aTableData.push(pData);  
       this.tempModel.setProperty('/AddressSet',aTableData);
},

Thank you,

Davids.

[SergioG_TX]

instead of using the cells, you should based it off your model only...

so when you select your country, then set your /RegionSet property to filter only items from that country. you should not need to use cells and all that other stuff.. if tomorrow your cell order changes, then your app will break - not a good practice.

[SergioG_TX]

something like this:

notice the changes i did -

1) removed the selectedKey property

2) changed the binding property in the RegionSet to Regions -- so that RegionSet is all of them, but Regions is the filtered down version of it

3) use the model instead of getting cells because this can change later in your project resulting in breaking your app

<Select   
    change='onSelectTableCountry'
    items="{path:'appModel>/CountrySet', templateShareable:'true'}">
    <core:Item key="{appModel>Land1}" text="{appModel>Landx50}"/>
</Select>
<Select   
    items="{path:'appModel>/Regions', templateShareable:'true'}">
    <core:Item key="{appModel>Bland}" text="{appModel>Bezei}"/>
</Select> 

// in your controller
onSelectTableCountry: function(oEvent) {
			var oModel = this.oView.getModel("appModel"); //named model(appModel)
			var countries = oModel.getProperty('/CountrySet');
			var regions = oModel.getProperty('/RegionSet'); // array from your service
			var selectedCountry = oEvent.getSource().getProperty('selectedKey');
			var aRegions = []; // filtered array
			
			for(var i =0; i < regions.length; i++){
				if(regions[i].Bland === selectedCountry) {
					aRegions.push(regions[i]);
				}
			}			
			
			oModel.setProperty('/Regions', aRegions); // set based on the selected country
		},

[AKMishra]

Dear Sergio,

Thanks a bunch!

I tried as you have suggested. Here is my observation. The data in /Regions remain sames, the UI behaves in the similar way as stated earlier. If the user wants to change the region of other row, the items in select (Regions Model) has the data as per filtered by last changed country, so the data in table for Region will change as per the current Model.

I feel, we need to have Regions Model per row as per the country selected there.