Get the Selected Row Index in sap.m.Table

[Former Member]

Hello,

In SAP UI5, the control sap.m.Table do not have any direct APIs to get the Index of the Selected Item.

Please let me know how to get the index (1 index in case the mode is SingleSelect and multiple indexes in case the mode is set for MultiSelect)

of the selected row/record in the table by using the id of the table.

Appreciate if you can provide any sample code snippets.

Thanks.,

[Former Member · Accepted solution]

Hi Sai/Dennis,

I am using the below function to read the value from the Selected Records from the table.

My Table definition:

<Table id="table" width="auto" mode="MultiSelect" class="sapUiResponsiveMargin"  items="{ path: '/XYZSet'}" >

Controller Event handler for Submit:

handleSubmit: function(){

  var oTable = this.getView().byId("table");

  var itemIndex = oTable.indexOfItem(oTable.getSelectedItem());

  if(itemIndex !== -1) {

  var oItems = oTable.getSelectedItems();

  for(var i=0;i<oItems.length;i++){

var materialNo = oItems[i].getBindingContext().getProperty("MaterialNo");

  var materialDesc = oItems[i].getBindingContext().getProperty("MaterialDesc");

  }

  }else{

  alert("No Items Selected. Please Select an Item");

  }

  }

I have binded the table with the OData Model (defaulted to 1 way data binding from model to view) and few of the column cells are editable as well. In this case, reading the data as shown above will give the values from the model and not the user updated/edited values.

In this case, what are all the possible ways to read the updated data and what will be the best practice in this case.

Can we make use of the getCells() API from the table to read the updated data like below.

var descTextFromTable = oTable.getItems()[i].getCells()[1].getXXX();

Kindly suggest your input.

Thanks,

[Former Member · Accepted solution]

Hi SUP S,

Its not good to get the values of table by reading the cells, for reading the updated values you need to make the model two way and than read the binding context of the selected item ..

on handlesubmit function  you need to get all the selected items :

var items = oTable.getSelectedItems()

than get updated values by reading the binding context

var updatedData = [];

for(var i=0 ;i<items.length ;i++)

{

var data = items[i].getBindingContext().getProperty();

updatedData.push(JSON.parse(JSON.stringify(data)));

}

updatedData array will have your updated records ... i hope you know how to make model mode 2 way ..

thanks

Viplove

[former_member182862 · Accepted solution]

HI Sup

I have changed the JSBIN to use for loop

JS Bin - Collaborative JavaScript Debugging

A few things.

1. IMO you have to be familiar with Javascript collection function like map, reduce, join, etc if you are working on Javascript

2. Never try to get value directly from the cell, this is a bad practice.

Thanks

-D

[Former Member]

Thanks Sai, Dennis and Viplov.

Your inputs are very much helpful to write the cleaner code.

Hi Viplov,

Will create a JSON Model and  bind with the values which are coming out of OData Model to enable the two way binding so that the edited data will be in sync for the payload update.

Thanks,

[Former Member]

Hi Viplove,

Instead of JSON Model, I enabled the OData Model to support the 2 way binding using the below code in Component.js.

oModel.setDefaultBindingMode("TwoWay"); 

We are on SAP UI5 1.28 version and i am using the sap/ui/model/odata/ODataModel class and not

sap/ui/model/odata/v2/ODataModel.

Will be there any issue in making the OData model to support 2 way binding?. Please clarify.

Thanks,

[Former Member]

Hi SUP,

It depends ... if its a global model like attach to the whole project than you should not make 2 way , we use those models just to interact with backend (Get and Post data) .. for local we use JSON model attach to specific control ... if you want to use odata still than you can make specific property as two way , not the whole model ... but i will prefer to use json locally ..

thanks

Viplove

[saivellanki]

Hi,

Will this sample help? JS Bin - Collaborative JavaScript Debugging

Regards,

Sai.

[Former Member]

Hi Sai,

This will be helpful to me and appreciate for the reply.

Can you please change the JS bin code in which onclick of say Submit button, I need to get all the selected Records and read the values to construct the payload in a for loop and call the back end.

Kindly update this code snippet in which on click of the Submit button, I need to read all the selected record values in a for loop.

Thanks,

[former_member182862]

HI Sup

maybe this is closer to what you need

JS Bin - Collaborative JavaScript Debugging

[Former Member]

Hi Dennis,

Thanks for the below reference code.

buttonPress: function(oEvent) {

      var oTable = this.getView().byId('idProductsTable');

      var selectedItems = oTable.getSelectedItems().map(function(item) {

        return item.getBindingContext().getObject();

      });

      sap.m.MessageToast.show(JSON.stringify(selectedItems));

    }

In my case,  will not require all the field column values from the table and need to add few additional dynamic parameters as well to construct the payload.

From the above code, item is the currently selected item in the loop and kindly let me know

the APIs to get the individual field values from item to construct the payload. (May be In a for loop will be more clear).

Thank you.