Skip to Content

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

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,

Add comment
10|10000 characters needed 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.

  • Get RSS Feed

5 Answers

  • Jan 30 at 07:08 AM

    Hi, here is an example based on your view:

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

    Add comment
    10|10000 characters needed 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

  • Jan 30 at 06:44 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • 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

  • Jan 30 at 05:48 AM

    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

    Add comment
    10|10000 characters needed 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

  • Feb 05 at 06:15 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

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