Bind a Drop Down on every row, added Dynamically on sap.m.Table

[former_member553641]

Dear All,
I have create a table, with a drop down control, I am adding rows dynamically in my table,
I am trying to bind my table column of drop down with a json model, but there are some challenges in there, kindly review my code, and advise,

var oTable = this.getView().byId("myTable");

this.items.push({
	item1: "",
        item2: "",
        item3: ""
});
 this.oModelJson.setData(this.items);
 this.oTable.setModel(this.oModelJson);
 this.oTable.bindRows("/");

Now my item1 is the drop down as declared in the view, after the end of above code, I am trying to bind my table drop down using following technique, my json model is global, and it has data, I am able to successfully bind my drop down out of table, but when I move my drop down inside the table, it is not binding,

var oDDL = this.byId("DropDown");
var oDDLTemplate = new sap.ui.core.Item({
				key: "{key}",
				text: "{Text}"
			});
oDDL.setModel(this.oJson);
oDDL.bindAggregation("items", "/results", oDDLTemplate);

Here is my view, Table

<t:Table id="myTable" width="auto" noDataText="No Record Found" busyIndicatorDelay="{detailView>/lineItemTableDelay}" class="sapUiResponsiveMargin" selectionMode="MultiToggle" visibleRowCount="5" growing="true" growingScrollToLoad="true">

<t:extension>
 <l:HorizontalLayout>
   <Button icon="sap-icon://add" text="Row" press="addRow"/>
   <Button icon="sap-icon://delete" text="Row" press="fDeleteRow"/>
 </l:HorizontalLayout>
</t:extension>

<t:columns>
 <t:Column width="16rem">
  <Text text="Item 1"/>
   <t:template>
     <ComboBox id="DropDown"></ComboBox>
   </t:template>
 </t:Column>
<t:Column width="8rem">
 text="Item 2"/>
  <t:template>
    <ComboBox id="txt_itm2" ></ComboBox>
  </t:template>
</t:Column>
<t:Column width="8rem">
 text="Item 3"/>
  <t:template>
    <ComboBox id="txt_itm3" ></ComboBox>
  </t:template>
</t:Column>
</t:Table>

Thanks,

[former_member553641]

Just to inform you all, I cannot provide binding on the Table view control, I need to bind my table, and drop down in the table after updating few fields from the form.

Thanks in advance.

[gururajenamate]

Check this:

https://answers.sap.com/questions/382103/how-to-pass-the-selected-value-from-one-combobox-t.html

Regards,

Gururaj

[sagarikagattu]

Hello, Can you try the below code once?

this._oView = this.getView();

var OModel = this.getOwnerComponent().getModel("dataset");

var combo1 = this._oView.byId("combo1");

sap.ui.getCore().setModel(OModel);

combo1.setModel(OModel);

var oItemTemplate1 = new sap.ui.core.ListItem();

oItemTemplate1.bindProperty("text", "Desg");

combo1.bindItems("/DesignationSet", oItemTemplate1);

Regards,

Sagarika.

[former_member553641]

Thanks for your response,
Actually I have implemented dynamic row add functionality, initially my table is empty, when user clicks add row button, a new record is added, now that new record row has a drop down, and I need to bind that with the data,

var combo1 = this._oView.byId("combo1");

This line is not valid to work in table, because there can be multiple rows in a table with the drop down,
Can you advise me to bind a drop down within the table,
I think we write some code like rowobject.

Thanks,
Hamdan

[sagarikagattu]

Hello ,
I have written below code, in the view, crate is the button which create one entry record in the table. 
<Table id="idProductsTable"
inset="false"
items="{path:'dataset>/EmployeeSet'}"
itemPress="onClick"
>
<headerToolbar backgroundCOlor="Blue"> 
<Toolbar >
<Button text="create" press="onCreate"/>
</Toolbar>
<ColumnListItem type="Active">
				<cells>	
					<Text
						text="{dataset>Empid}" />
					<Text
						text="{dataset>Empname}" />
				<Text
						text="{dataset>Empadd}" />
							<ComboBox
				id = "combo1" selectedKey="{dataset>Empdes}">
			</ComboBox>
				</cells>
			</ColumnListItem>
and below code in oninit component of controller -

		 onInit: function() {
   
    that = this;
      this._oView = this.getView();
    
          var OModel = this.getOwnerComponent().getModel("dataset");
      var combo1 = this._oView.byId("combo1");
     sap.ui.getCore().setModel(OModel);
combo1.setModel(OModel);
var oItemTemplate1 = new sap.ui.core.ListItem();
oItemTemplate1.bindProperty("text", "Desg");
oItemTemplate1.bindProperty("key", "Desg");
combo1.bindItems("/DesignationSet", oItemTemplate1);
    },
    

[former_member233511]

Hi, here is an example based on your view:

https://jsbin.com/vawucijomo/edit?html,output

[former_member553641]

Dear Parshin,

Thanks for your response, I need dynamic binding of dropdown inside a table, I cannot bind the drop down control from view, as it is conditional binding, and I need to bind my drop down only after adding a blank row.
The case you provided is binding the rows only on view load, which is not my requirement.

Thanks,
Hamdan

[Sharathmg]

Currently, the runtime is confused as the bound model to table may have linked a property which stores single variable but the drop down needs a set of values.

Firstly, don't bind any model to the table. Once you read the data in the model, use the array variable to bind it to the dropdown element in the table.

Follow the example provided by richard-zhao in the earlier response.

Regards,

Sharath

[former_member553641]

Dear Sharath,
Thanks for your response, I am using the same trick, I tried to bind a drop down in my table against an array, but still its showing null records.
Regards,
Hamdan

[Sharathmg]

Try to manually prepare a JSON similar to one in the example. Then, check if you are able to get the data into table with dropdown array.

Then, check if the data JSON file which you are getting is in a similar format and test it. It must be something with the data binding to the table due to which the data is not loading.

Regards,

Sharath

[richard-zhao]

Hello, Hamdan, I think the root cause is when you put the dropdown list into a table the dropdown list depends on the model which is bound to the table. I found a perfect sample which can face to your technical Scenario. please check it out. thanks

https://sapui5.hana.ondemand.com/#/sample/sap.ui.table.sample.Basic/code

[former_member553641]

Dear Zhao,

Thanks for your response, I need dynamic binding of dropdown inside a table, I cannot bind the drop down control from view, as it is conditional binding, and I need to bind my drop down only after adding a blank row.
The example code you provided from SAPUI5 Explored is binding the rows only on view load, which is not my requirement.

Thanks,
Hamdan