How to read the data from selected SAPUI5 table row

[Former Member]

Hi,

I would like to read the data from the selected row in SAPUI5 table. I have defined a table in JS view as:

var

sysTable = new DataTable({

     title:

"SAP System List",

     visibleRowCount: 10,

     selectionMode: SelectionMode.Single,

     editable : true

});

The table is binded to JSON data

sysTable.bindRows("/SystemDetails");

I have also used the attachRowSelect function to get the selected row indices.

sysTable.attachRowSelect(function(oEvent){

                  oSystemDetailsML.bindContext(

"/SystemDetails/" + sysTable.getSelectedIndices());  

             });

Lets say the table has two columns as "SysID" and "Description". I am not able to read the data for the selected row.

Tried using the command  alert(sap.ui.getCore().byId("SysID").getValue());   but not sure how this will read the data from selected row.

Thanks,

Yomesh

[Former Member · Accepted solution]

Hi Yomesh,

You have two options for selecting a value from table....

1. You want to get a value for single select

2. You want to get values for multi-select (you will need to use array in this case)

The following code is for single select:

sysTable.attachRowSelect(function(oEvent){

var currentRowContext = oEvent.getParameter("rowContext"); 

var selSysId = oSystemDetailsML.getProperty("SysID", currentRowContext);

var selDesc = oSystemDetailsML.getProperty("Description", currentRowContext);

});

Now if u say var selIndices = oEvent.getParameter("rowIndices"), this will return you an integer array which u can use like this :

selSysId = oSystemDetailsML.oData.SystemDetails[selIndices[0]].SysId;

Regards,

Shubham Agrawal

[former_member193103 · Accepted solution]

Hi Shubham,

I am trying to show data of a listitem to a popover window. After clicking on the listitem the data will appear on the popover window in some input fields. I am using sap.m library. Can you please show me some example how can I do that?? I have posted a quarry on the same problem..

Thanks

Himadri

[former_member184867]

You can try this in the handler function of attachRowSelect ..

//Get the  SPath of selected row 
var sPath = oEventParam.getParameter("rowContext").getPath();
//Get the model attached to the table
//Ensure that variable sysTable is visible 
var model = sysTable.getModel();
//get the selected  data from the model 
var data  = model.getProperty(sPath);
console.log(data['SysID'] );
console.log(data['Description'] );

[Former Member]

Hi there,

I've just searched for a way to access the value of a column of the selected row without using the rowSelect-event handler (which is in many cases just for the purpose to store  - for example - a record id in a global variable, and then access this variable from another function; and in such a use case using the rowSelect-event is not a straight forward approach)

In my case I simply wanted to delete the selected record from a table when a delete-button is clicked and for this purpose I wanted direct access to the selected record.

I'll post my delete function here which should be self-explanatory:

var btnDeleteSelected = new sap.ui.commons.Button({text: "Delete selected record"});
btnDeleteSelected.attachPress(function() {

    if (tblUser.getSelectedIndex() > -1) {
        // Delete entry

        var context = tblUser.getContextByIndex(tblUser.getSelectedIndex());

        // console.log(context.getObject().ID); you can access all column values via the object returned by getObject()
        oData.remove('/tbl_user(' + context.getObject().ID + ')');


        // alternative apporach - delete the entry using the path (no access to the data object needed)
        oData.remove(context.path);
    }
});

[Former Member]

This message was moderated.

[Former Member]

Hey Shubham Agrawal,

How to get the JASON data from the table,, in which i get the table JASON data from my local host.

Wen i select my row i want to display my Row context ...........

Their are many example for getting JASON data which is stored in Program aDATA......i am getting the table data from Local host..... 

Can you guide me for this Issue how to get row data which i am getting from Local Host

My code is below---->

<script>

jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['ERROR']);

var oTable = new sap.ui.table.Table({

        title:"Search Results",

        selectionMode : sap.ui.table.SelectionMode.Single,

        editable:true

        });

var oControl = new sap.ui.commons.TextView({text:"{NscItem}"}); // short binding notation

        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "NscItem"}), template: oControl }));

        var oControl = new sap.ui.commons.TextView({text:"{SapItem}"}); // short binding notation

        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "SapItem"}), template: oControl }));

var oModel = new sap.ui.model.json.JSONModel();

        var aData = 

        jQuery.ajax({

           url: "http://localhost/client.json",  // for different servers cross-domain restrictions need to be handled

           dataType: "json",

           success: function(data, textStatus, jqXHR) { // callback called when data is received

            oModel.setData(data);             // fill the received data into the JSONModel

           },

           error: function(jqXHR, textStatus, errorThrown) {

           }

        });

        oTable.setModel(oModel);

        oTable.bindRows({

        path:"/"

});

oTable.placeAt("dataTable");

I want this Table Row wen select to display in my text field with a Lable

Guide me friends

[Former Member]

Hi Vishnu,

This is pretty simple.

Consider this as the sample data :

oModel.setData({

hardware:[

{device:"PC", enabled:true},

{device:"Monitor", enabled:true},

{device:"Keyboard", enabled:false},

{device:"Mouse", enabled:true},

{device:"Speaker", enabled:false},

{device:"Printer", enabled:true}],

editable: true,

tooltip: "Device"});

Attach a RowSelectionChange event to your table and write the following code.

oTable.attachRowSelectionChange(function(oEvent) {

var currentRowContext = oEvent.getParameter("rowContext");  //Stores your Row Context in the variable

     var selData = oModel.getProperty("device", currentRowContext);// Get the desired value by giving the property name i.e. the field name in the JSON which you want to get. In this you will get the device name of the selected row in the variable.

}

Lemme know if this helps.

Regards,

Shubham Agrawal

[Former Member]

hai Agrawal,

this is my code

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;h...

this shows my table with JASON data which i am calling from local host...... i Get it but , as you Suggested the code now,

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;h...

When i add this no data is coming / table itself is not coming ......Why ?

What i Need:-

Wen i click the row ,i want to display the row data in another view , Any Idea friend

[Former Member]

Thanks! It worked perfectly for me. Just change values (for model and desired field)

oTable.attachRowSelectionChange(function(oEvent) {

  var currentRowContext = oEvent.getParameter("rowContext"); //Stores your Row Context in the variable

  var selData = extModel.getProperty("Text", currentRowContext);

  console.log(selData);

  });

[Former Member]

Hi Yomesh,

If you only want the value or text wich displayed in cell, you can use this:

table.attachRowSelect(function(){
                    for(var i = 0; i < table.getSelectedIndices(); i++){
                              //Index of getCells, is the index of the column that we want
                              //table.getRows()[table.getSelectedIndices()[i]].getCells()[1], get the template,
                              //this is a Label so we use getText for get the value
                              table.getRows()[table.getSelectedIndices()[i]].getCells()[1].getText();
                    }
          });

Regards,

Jose Manuel