CODEWITHSUNDEEP
javascriptsapui5
user2644620
user2644620

Reputation: 199

sapui5 sap.m.table How to add Input as column on Click of add Row button

I have a small requirement in sap.m.Table. Initially, I created a table like below..

                          <Table id="reqTable" mode="MultiSelect">
                                                <columns>
                                                    <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
                                                        <Text text="{i18n>startDate}"/>
                                                    </Column>
                                                    <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
                                                        <Text text="{i18n>endDate}"/>
                                                    </Column>
                                                </columns>
                                                <items>
                                                    <ColumnListItem>
                                                        <cells>
                                                            <Text text="12/08/2002"/>
                                                            <Text text="13/09/2002"/>                                                           
                                                        </cells>
                                                    </ColumnListItem>
                                                </items>
                                            </Table>

Now if i click on "Add Button", i need to add sap.m.Input to the column , But im getting NaN/NaN/NaN in the new column instead of sap.m.Input. Please check the below imageenter image description here

In the above image, if you see, I need sap.m.Input instead of NaN and it must be editable. I'm trying with below code, but it is not working..

onAdd: function() {
            var table = this.getView().byId("reqTable");
            var itemRow = {
                StartDate: new sap.m.Input(),
                EndDate: new sap.m.Input(),
                editable: true,
                LeaveType: ""
            };

            var oModel = this.getView().getModel('userInfoTableModel').getData();

            oModel.push(itemRow);

            this.getView().getModel('userInfoTableModel').setData(oModel);
        }

Can someone please help me to make it work.

Thank you in advance

Upvotes: 0

Views: 6005

Answers (3)

sourabh7
sourabh7

Reputation: 51

You can add a Row with input field in it by creating a template of ColumnListItem and then adding that in the aggregation of the table as items. The ColumnListItem can have any control. In below example, I'm adding a date range selection and an Input field.

oTable.bindAggregation("items", {
                path: "mainModel>/results",
                template: new sap.m.ColumnListItem({
                    cells: [
                        new sap.m.DateRangeSelection({
                            dateValue: "{mainModel>startDate}",
                            secondDateValue: "{mainModel>endDate}",
                            change: that.fnHandleDateChange.bind(that),
                            minDate: new Date(),
                            maxDate: new Date(9999, 11, 31)
                        }),
                        new sap.m.Input({
                            value: "{mainModel>value}",
                            type: sap.m.InputType.Number,
                            change: that.fnHandleValueChange.bind(that),
                            textAlign: sap.ui.core.TextAlign.Right,
                        })
                    ],
                    highlight: sap.ui.core.MessageType.Information
                })
            });

Upvotes: 0

I.B.N.
I.B.N.

Reputation: 1034

You Have to use Factory Template.

<Table id="idProductsTable"
          mode="SingleSelectMaster"
          growing="true"
          growingThreshold="5"
          selectionChange="onSelectionChange"
          updateFinished="onUpdateFinished"
          items="{
                       path: '/',
                       factory: 'factoryFunc'
                  }">
            <columns>
              <Column>
                <Label text="ID" />
              </Column>
              <Column>
                <Label text="Product" />
              </Column>
              <Column>
                <Label text="Weight" />
              </Column>
              <Column>
                <Label text="Availability" />
              </Column>
            </columns>
   </Table>

On Controller:

factoryFunc: function(id, context) {
        var oTemplate = new Item({
          text: "{Text}"
        });
        var oContext = context.getProperty("Control");
        if (oContext == "C") {
          return new ColumnListItem({
            cells: [new Text({
                text: "{ProductId}"
              }),
              new Text({
                text: "{Name}"
              }),
              new Text({
                text: "{Weight}"
              }),
              new Text({
                text: "{Availability}"
              })
            ]
          })
        }else if (oContext == "N") {
          return new ColumnListItem({
            cells: [new Text({
                text: "{ProductId}"
              }),
              new Text({
                text: "{Name}"
              }),
              new Text({
                text: "{Weight}"
              }),
              new Input({
                value: "{Availability}"
              })
            ]
          })
        }

}

More on Sap Blog, Plunker

Upvotes: 1

memeladon
memeladon

Reputation: 58

You are getting NaN because the framework is trying to parceFloat the property values expected by the binding, which are undefined, since these are taken from the sap.m.Input instance you've created.

You shouldn't be storing Controls in a model, since it violates the MVC architecture of SAPUI5 framework.

I would suggest you to use a factory function to render table list item cells: you can decide whether to render sap.m.Text or sap.m.Input based on "editable" property.

Upvotes: 0

Related Questions