Get selected item from sap.m.Select from a sapui5 table column

Question

I am using sap.m.Table, where I have 3 columns, as sap.m.text, sap.m.setect and the last one is button.

My model code

var oModel = new sap.ui.model.odata.OData("url");
sap.ui.getCore().setModel(oModel ,"data");

Table view code(cells)

var oTemplate = new sap.m.ColumnListItem({
        cells : [
            new sap.m.Text({
                text: "{data>Address}"
            }),
            new sap.m.Select({
                id:"sel",
                items: {
                    path: "data>/OPERATORS", // this is a diffent table
                    template: new sap.ui.core.Item({
                    text: "{data>firstName} {data>lastName}"
                    })
                },
                forceSelection: false

            }),
            new sap.m.Button({
                        text : "Start",
                        press : [oController.onPressStart, oController]
             })
        ]
    });
oTable.bindItems("data>/ORDR", oTemplate); //differnt table

Working fine, getting all required data on the specific table.(Notice first column is coming from ORDR table and second one is coming from OPERATORS table).

Now on button click I wanted the specific row data. My code as follows -

onPressStart : function(oEvent){  
   var obj = oEvent.getSource().getBindingContext("data").getObject();
   },

"obj" gives me ORDR table row objects(where I pressed the button).

Now I also want the value I will select on the dropdown box. How to get it.

Please suggest, Thank you

JSbin Link - http://jsbin.com/quhomoloqo/edit?html,console,output

Answer 1

See this working example:

Please note how (for the sake of this question) created two models: One named 'orig' which holds your original OPERATOR and ODRD data, and one named 'data' which holds a copy of the OPERATOR data, with an added Address property.

See the view code on how the two models are used (the new one for the table, the old one for populating the dropdown)

sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {
    },

    onAfterRendering : function() {
        // your original model
        var oModel        = new sap.ui.model.json.JSONModel();

        var oData = {
            "ODRD":[
                {"Address":"UK"},
                {"Address":"US"}
            ],
            "OPERATORS":[
                {"firstName":"a","lastName":"b"},
                {"firstName":"c","lastName":"d"}
            ]
        };

        oModel.setData(oData);

        this.getView().setModel(oModel, "orig");

        // the model you actually need
        var oNewModel     = new sap.ui.model.json.JSONModel();

        var oNewData = oData.OPERATORS.map(function(result) {
            return {
                firstName : result.firstName,
                lastName : result.lastName,
                keyToAddress : null
            }
        })

        oNewModel.setData({
            "OPERATORS" : oNewData
        });

        this.getView().setModel(oNewModel, "data");
    },

    showData : function(oEvent) {
        alert(JSON.stringify(oEvent.getSource().getBindingContext("data").getObject()));
    }
});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.m"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc" >
        <Table id="tbl" items="{data>/OPERATORS}">
            <columns>
                <Column>
                    <Text text="First" />
                </Column>
                <Column>
                    <Text text="Last" />
                </Column>
                <Column>
                    <Text text="ODRD" />
                </Column>
                <Column>
                    <Text text="" />
                </Column>
            </columns>
            <items>
                <ColumnListItem>
                    <cells>
                        <Input value="{data>firstName}" />
                        <Input value="{data>lastName}" />
                        <Select items="{orig>/ODRD}" selectedKey="{data>keyToAddress}">
                            <items>
                                <core:ListItem key="{orig>Address}" text="{orig>Address}" />
                            </items>
                        </Select>
                        <Button text="Show data" press="showData" />
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
    </mvc:View>
</script>