Skip to Content
avatar image
Former Member

Display Information on the basis of Selected Row

Hello All,

I am trying to create one sample application with Element Binding in which when the user selects any row in the table in another view it displays the information on the basis of selected Row. I know on there are many threads and sample code for this, but I am not able to understand, I don't want to copy-paste the code. If someone could explains the steps it would be much appreciable.

Lets assume we have one JSON Model :

var data =                '{  "Leaders": [

                                    {"fName": "Sonia","lName":"Gandhi", "id" : "1"},

                                    {"fName": "Narendra","lName":"Modi","id" : "2"},

                                    {"fName": "Rahul","lName":"Gandhi","id" : "3"},

                                    {"fName": "Sushma","lName":"Swaraj"},"id" : "4" ],

                                    "Party" : [

                                    {"Party_Name": "Congress"},

                                    {"Party_Name": "BJP"},


Please someone can explain how can I achieve this when user select any row of first table , it gives the information about the party name.



Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Oct 15, 2015 at 01:37 PM

    Hi Mayank,

    Please correct me , if my understanding is correct. On Selection of the one object value, you want to retrieve another object value like for example if I click on 'Narendra Modi' object it should retrieve the party name as 'BJP',

    If above understanding is correct, then I guess there should be one more extra key value added to both the arrays that is something like Party ID. Since, most of us know which party these politicians belong to, but the system doesn't know 😊. So it can identify only with common key value between the arrays.

    Your model should be something like below and your code will be like this: JS Bin - Collaborative JavaScript Debugging on select of the list item you will get the party name as an alert -

    var data = {
          "Leaders": [{
            "fName": "Sonia",
            "lName": "Gandhi",
            "id": "1",
            "partyid": "1"
          }, {
            "fName": "Narendra",
            "lName": "Modi",
            "id": "2",
            "partyid": "2"
          }, {
            "fName": "Rahul",
            "lName": "Gandhi",
            "id": "3",
            "partyid": "1"
          }, {
            "fName": "Sushma",
            "lName": "Swaraj",
            "id": "4",
            "partyid": "2"
          "Party": [{
            "Party_Name": "Congress",
            "partyid": "1"
          }, {
            "Party_Name": "BJP",
            "partyid": "2"

    Please correct me if this is not your requirement.


    Sai Vellanki.

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Sai Vellanki

      Hi Sai,

      Thank you so much for taking time and explaining the things in so detail. For me still long way to go but you gave a good start.


      Mayank Saxena

  • Oct 15, 2015 at 12:55 PM

    Hi Mayank,

    It is pretty much easy to achieve your requirement.

    1. Bind your Records to Table by using binding concepts.

    2. By Using getSelectionChange event, you can retrivew your selected records from table.

    for ex:

    JS Bin - Collaborative JavaScript Debugging


    Karthik A

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Mayank,


      1. oControlEvent is an object comes from selectionChange event.

      It have your model data, SelectedRow information, Property details etc.

      2. oControlEvent.getParameters().listItem - under oControlEvent, one of the function called getParameters - It holds your current selection path and its model information

      3. var contextPath = ev.oBindingContexts.Contact; - Contact is a pathway to get your selected path

      Now I have my selected path, so by using  "contextPath.getModel().getProperty(contextPath.sPath + "/fName")"

      this function to get my selected record informations.


      Karthik A

      Capture.PNG (116.2 kB)