CODEWITHSUNDEEP
sapui5
H.K
H.K

Reputation: 138

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

I have created 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 JSONModel but there are some challenges in there.

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 JSONModel is global and it has data. I am able to successfully bind my drop down outside 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"
>
  <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 text="Item 2"/>
    <t:template>
      <ComboBox id="txt_itm2" ></ComboBox>
    </t:template>
  </t:Column>
  <t:Column width="8rem">
    <Text text="Item 3"/>
    <t:template>
      <ComboBox id="txt_itm3" ></ComboBox>
    </t:template>
  </t:Column>
</t:Table>

Upvotes: 1

Views: 4407

Answers (1)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18054

Here is a minimal example: https://plnkr.co/edit/8YvXxk?p=preview

In my example above, the rows are initially empty ([]). The binding definitions can stay in the view:

<t:Table rows="{/}">
  <t:extension>
    <OverflowToolbar>
      <ToolbarSpacer />
      <Button
        icon="sap-icon://add"
        press=".onAddPress"
      />
    </OverflowToolbar>
  </t:extension>
  <t:columns>
    <t:Column>
      <Text text="Item 1" />
      <t:template>
        <ComboBox items="{items1}">
          <core:Item
            key="{key}"
            text="{text}"
          />
        </ComboBox>
      </t:template>
    </t:Column>
    <!-- ... -->
  </t:columns>
</t:Table>

By this, I just need to enhance the existing model data when the user presses on the + button instead of calling bindRows or bindAggregation every time.

onAddPress: function() {
  const model = this.getOwnerComponent().getModel(); // JSONModel
  const currentRows = model.getProperty("/");
  const newRows = currentRows.concat(this.createEntry());
  model.setProperty("/", newRows);
},

enter image description here

Upvotes: 2

Related Questions