Skip to Content
author's profile photo
Former Member

How to read the data from selected SAPUI5 table row

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

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

5 Answers

  • Best Answer
    author's profile photo
    Former Member
    Nov 13, 2013 at 05:24 AM

    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


    Add comment
    10|10000 characters needed characters exceeded

    • 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

  • author's profile photo
    Former Member
    Nov 12, 2013 at 02:40 AM

    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'] );
    Add comment
    10|10000 characters needed characters exceeded

  • author's profile photo
    Former Member
    Mar 20, 2014 at 10:51 AM

    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);
        }
    });
    
    Add comment
    10|10000 characters needed characters exceeded

  • author's profile photo
    Former Member
    Nov 12, 2013 at 08:00 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • author's profile photo
    Former Member
    Dec 18, 2013 at 11:07 AM
    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

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member 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);

      });