CODEWITHSUNDEEP
sapui5sap-fiori
user6757698
user6757698

Reputation: 3

How to get values from input in sap.ui.table.Table?

In sap.ui.table.Table I have input field in one column. It will get nearly 300 records of data from back-end and binded in other columns.

User manually enters in the input field. Further, when he clicks on submit button I have to take all values from all input as array. Please give suggestions.

Upvotes: 0

Views: 9423

Answers (2)

Ashish Patil
Ashish Patil

Reputation: 1742

You can do it using data binding of table, as invoking getRows() on Table control to access Input fields of each row would not help in this case;it only returns only currently visible rows and you have around 300 records to access.

Here is the solution:

  1. Get all data from back-end in JSONModel.
  2. Add one property say inputValue to each item in model's data by iterating over it.
  3. Bind this model to table and use inputValue property in table's template to bind column containing Input fields.

As JSONModel supports two-way binding, all the values which user has entered in an Input fields are available in your model.

And, lastly iterate over model's data to get inputValue for each row.

Above steps in action:

Step 1 and 2:

setModelForTable: function() {
    var oModel = sap.ui.model.json.JSONModel( < URLToLoadJSON > );
    var length = oModel.getData().results.length;

    for (var i = 0; i < length; i++) {
        var path = "/results/" + i + "/inputValue";
        oModel.setProperty(path, "");
    }
}

Step 3:

Now, that you have model with inputValue property in all the items of data, set the model on table; which will show all the Input fields in columns empty initially and will update the corresponding model entry as user modifies it.

<t:Column>
    <t:label>
        <Text text="User Input" />
    </t:label>
    <t:template>
        <Input value="{inputValue}" />
    </t:template>
</t:Column>

Finally, get all entered values in array.

var length = oModel.getData().results.length;
var aInputvalues = []
for (var i = 0; i < length; i++) {
    var path = "/results/" + i + "/inputValue";
    aInputvalues.push(oModel.getProperty(path));
}

Upvotes: 3

Shidai
Shidai

Reputation: 227

I had the case which is a bit similar and I did it in the following way. Will work if you really do not need records which are not changed.

  1. have a variable to store [] of changed records
  2. Attach change to input field

  3. on change push changed record to a variable 

    var source = event.getSource();
source.getModel().getProperty(source.getBindingContext().getPath());

or the value of the input field. 

    event.getSource().getValue();

In case you have a record Id you can just push this ID and input value. 4. on submit iterate through an []

Upvotes: 1

Related Questions