Skip to Content
0

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

Jan 30 at 04:33 AM

615

avatar image

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,

10 |10000 characters needed characters left characters exceeded

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.

0
* Please Login or Register to Answer, Follow or Comment.

5 Answers

Efim Parshin Jan 30 at 07:08 AM
0

Hi, here is an example based on your view:

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

Show 1 Share
10 |10000 characters needed characters left characters exceeded

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

0
Sharath M G Jan 30 at 06:44 AM
0

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

Show 2 Share
10 |10000 characters needed characters left characters exceeded

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

0

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

0
Richard Zhao
Jan 30 at 05:48 AM
0

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

Show 1 Share
10 |10000 characters needed characters left characters exceeded

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

0
Sagarika Gattu Feb 05 at 06:15 AM
0

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.

Show 2 Share
10 |10000 characters needed characters left characters exceeded

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

0
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); },
0
avatar image
Former Member Mar 28 at 05:24 AM
0
Share
10 |10000 characters needed characters left characters exceeded