How to deselect all the selected values from MultiCombobox after binding the value to Sap.m.Table?

[former_member195820]

Hi all,

I have a MultiCombobox with hardcoded items in it. I have a sap.m.Table in which i need to bind the selected keys from the multicombobox as separate rows to the table.

Here's the view code for multicombobox:

<MultiComboBox id="husinput1" selectionChange ="husinput1function"  selectionFinish="comboselfinish" class="sapUiSizeCompact">
   <items>
 <core:Item key="Seaman Crew Change" text="Seaman Crew Change" />
  <core:Item key="Passenger Crew Change" text="Passenger Crew Change" />
   <core:Item key="Crew Shore Leave" text="Crew Shore Leave" />
  <core:Item key="Visitor" text="Visitor" />     
   <core:Item key="Crew Transfer" text="Crew Transfer" />  
  <core:Item key="Immigration Clearance" text="Immigration Clearance" />  
  <core:Item key="Ship Spares & Supply provision" text="Ship Spares & Supply provision" /> 
  <core:Item key="Diving Request" text="Diving Request" />
  <core:Item key="SSCEC Certification" text="SSCEC Certification" />
 <core:Item key="Transportation Services" text="Transportation Services" />   </items>
 </MultiComboBox>

code for Table:

<Table id="idhusbservTabel1" items=""   fixedLayout="false" class="sapUiSizeCompact" > 
<headerToolbar>	<Toolbar height="3rem">	<ToolbarSpacer />
</Toolbar></headerToolbar>
<columns >
<Column >
<Label text="Service Name" design="Bold" />
</Column>
<Column  hAlign="Left"  minScreenWidth="Small" demandPopin="true">
<Label text="Quantity" design="Bold" />
</Column><Column  textAlign="Center" minScreenWidth="Small" demandPopin="true" hAlign="Center">
<Label text="Rate" design="Bold" /></Column>
<Column ><Label text="Remarks" design="Bold"  /></Column>
<Column ><Label text="" design="Bold"  /></Column>
</columns>
</Table>

Controller code for selection change and deleting table row function :

husinput1function: function() {
var hustable=this.getView().byId("idhusbservTabel1");
var Array2=[];
var valueofhusb = this.getView().byId("husinput1").getSelectedKeys().toString();
var valueofhusb2; var isplit; 
if(valueofhusb!=="" && iselectcount!==0)
{
isplit = valueofhusb.split(","); 		
var isplitval1 = isplit[iselectcount]; console.log("isplitval1 : ",isplitval1);
valueofhusb2 = isplitval1;
}else	{
   valueofhusb2 = valueofhusb;	}
obj1={sername:valueofhusb2,qty:"",rate:"200",rem:""};
Array1.push(obj1);
var arlength = Array1.length;
Array2={"Array2" : Array1} ;
  oModelarr = new sap.ui.model.json.JSONModel(Array2);
hustable.setModel(oModelarr);
 var  titems2=new sap.m.ColumnListItem({type: sap.m.ListType.Active,
 cells: [ new sap.m.Text({text: "{sername}"}),
	 new sap.m.Input({value: "{qty}",type: "Number"}),
	new sap.m.Input({ value: "{rate} USD",editable: false}),
	new sap.m.Input({value: "{rem}"	}),
new sap.m.Button({ icon:"sap-icon://decline", type:"Reject",press:this.onDeletefunc	})]
});
hustable.bindItems("/Array2",titems2);
iselectcount++;		
	},
	
onDeletefunc:function(oEvent)
{
 var deleteRecord = oEvent.getSource().getBindingContext().getObject();
for(var i=0;i<Array1.length;i++){
if(Array1[i] == deleteRecord )
{
Array1.splice(i,1); //removing 1 record from i th index.
oModelarr.refresh();
}
}
},

I am attaching the screenshot here.

Now the problem is, if i remove any table row the selected option in the combobox need to get deselected or if I deselect any item in the combobox it's adding an empty row to the table.

Can someone help me with this?

[vedaradhya · Accepted solution]

Hi Ramya Ramasamy,

Instead of hard coding items to multi combo box, If you use json model it ll be easy to handle,

Here is the sample. i have done,

Sample

[former_member195820 · Accepted solution]

Hi Vedaradhya Agrahar,

Thanks for your quick response. It really worked for me!! 🙂

Regards,

Ramya