CODEWITHSUNDEEP
sapui5
Vanquished Wombat
Vanquished Wombat

Reputation: 9535

Get binding path of selectedItem in a sap.m.select element

A select element is a dropdown list in which an option may be selected.

The select element has the selectedItem which is a handle to the currently selected item. A selected item has a key that I bind to an identifying attribute in my JSON model.

Using an XML view declaration, I can use the change() event to fire code in the controller.

In the change() event how can I get the binding path of the selectedItem without having to search the model to match the key?

This is what I intuited but the second line throws an error. 

onListSelect : function(event) {
    console.log(event.oSource.getSelectedItem().getKey()) // works ok
    var path = event.oSource.getSelectedItem().getBindingContext().getPath(); // Fails
}

EDIT: In response to input & comments I added the snippet to isolate the issue. In the course of doing so I find that there is no issue. The snippet works. Must have been my own mistake.

I shall erase the question shortly.

// JSON sample data
var data = {
"peeps":  [
    {className: "Coding 101", id: 100, firstName: "Alan", lastName: "Turing"},
    {className: "Coding 101", id: 400, firstName: "Ada", lastName: "Lovelace"},
    {className: "Combat 101", id: 300, firstName: "D", lastName: "Trump"},
    {className: "Combat 101", id: 700, firstName: "Spartacus", lastName: ""},
    {className: "Combat 101", id: 900, firstName: "Tasmanian", lastName: "Devil"}

  ]  
};


sap.ui.getCore().attachInit(function() {
   "use strict";
   sap.ui.controller("MyController", {
     onInit: function() {

    // create JSON model instance
    var oModel = new sap.ui.model.json.JSONModel();

    // set the data for the model
    oModel.setData(data);
   
    // set model to core.
    sap.ui.getCore().setModel(oModel);
     },
     
    onListSelect : function(event) {
        console.log(event.getSource().getSelectedItem().getKey()); // works ok
        var path = event.getSource().getSelectedItem().getBindingContext().getPath(); // Fails
        console.log("Path=" + path)

        var oModel = sap.ui.getCore().getModel()
        var theName = oModel.getProperty(path)
        console.log("You selected " + theName.lastName)
        
    }
         
   });
   sap.ui.xmlview({
     viewContent: jQuery("#myView").html()
   }).placeAt("content");
  
  });
<!DOCTYPE html>
<title>SAPUI5</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>

<script id="myView" type="ui5/xmlview">
  <mvc:View controllerName="MyController" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:layout="sap.ui.commons.layout" xmlns:f="sap.ui.layout.form">

    <Select id="theList" forceSelection="false" wisth="auto" change="onListSelect" items="{
                        path: '/peeps',
                        sorter: { path: 'lastName' }
                    }" class="sapUiResponsiveMargin">
      <core:Item key="{id}" text="{lastName}" />
    </Select>

  </mvc:View>
</script>

<body class="sapUiBody">
  <div id="content"></div>
</body>

Upvotes: 1

Views: 19587

Answers (1)

vivek
vivek

Reputation: 140

Check following XML and JS code :

XML Code : 

`<Select id="id_Select"
                    forceSelection="false"
                    selectedKey="{/Data/0/key}"
                    change="fnSelectChange"
                    items="{/Data}" >
                    <core:Item key="{key}" text="{name}" />
            </Select>`

JS Code :

fnInputHandel : function(){
    oSelectJSON = new sap.ui.model.json.JSONModel();
    var Data = {
            Data : [{
                name : "name1",
                key  : "key1"
            },{
                name : "name2",
                key  : "key2"
            }]
    }
    oSelectJSON.setData(Data);
    this.getView().byId("id_Select").setModel(oSelectJSON);
},

fnSelectChange : function(oEvent){
    var value = oEvent.oSource.getSelectedItem().getBindingContext().getPath();
},

Upvotes: 4

Related Questions