Dropdown is not populating in SAP UI5

Question

I have done some complex things in UI5 but somehow today I'm stuck wherein my dropdown is not getting populated at all after I attach a model with it. I'm not sure what mistake I am making :(

My XML View:

<Panel headerText="Pump Filter" expandable="true" id="filterPanel" expand="onPanelExpand">
    <content>
        <f:SimpleForm editable="true" layout="ResponsiveGridLayout" id="mainform">
        <f:content>
        <Label id="idPumpLabel" visible="true" text="Pump"></Label>
        <Select id="pumpSelect" items="{ path: '/Rowsets/Rowset/0/Row'}" change="onPumpSelect" forceSelection="false" width="200px">
                    <core:Item key="{ID_PUMP}" text="{DS_PUMP}" />
        </Select>
        </f:content>
        </f:SimpleForm>
    </content>
    </Panel>

In my controller, in Oninit function, following is my code:

onInit: function(){

                var that = this;

                this.getView().addEventDelegate({
                    onBeforeShow: function () {


                        var oData = {
                                   "Rowsets":{
                                          "DateCreated":"2016-08-04T8:15:47",
                                          "Version":"15.0 SP6 Patch 3 (Mar 23, 2016)",
                                          "StartDate":"2016-08-04T8:15:47",
                                          "EndDate":"2016-08-04T8:15:47",
                                          "CachedTime":"",
                                          "Rowset":[
                                             {
                                                "Columns":{
                                                   "Column":[
                                                      {
                                                         "Name":"ID_PUMP",
                                                         "SourceColumn":"ID_PUMP",
                                                         "Description":"ID_PUMP",
                                                         "SQLDataType":4,
                                                         "MinRange":1,
                                                         "MaxRange":1
                                                      },
                                                      {
                                                         "Name":"DS_PUMP",
                                                         "SourceColumn":"DS_PUMP",
                                                         "Description":"DS_PUMP",
                                                         "SQLDataType":12,
                                                         "MinRange":1,
                                                         "MaxRange":1
                                                      }
                                                   ]
                                                },
                                                "Row":[
                                                   {
                                                      "ID_PUMP":100,
                                                      "DS_PUMP":"Pump_100"
                                                   },
                                                   {
                                                      "ID_PUMP":200,
                                                      "DS_PUMP":"Pump_200"
                                                   },
                                                   {
                                                      "ID_PUMP":300,
                                                      "DS_PUMP":"Pump_300"
                                                   }
                                                ]
                                             }
                                          ]
                                       }
                                    };

                    var oPumpModel = new sap.ui.model.json.JSONModel(oData);
                    that.byId("pumpSelect").setModel(oPumpModel);


                    }

                });

            },

But somehow dropdown is blank. No value is being populated.

What am I doing wrong?

Thanks !

Answer 1

I needed to add aggregate to get it working:

<Select id="pumpSelect" items="{/Rowsets/Rowset/0/Row}">
     <items>
          <core:Item key="{ID_PUMP}" text="{DS_PUMP}" />
     </items>
</Select>

Answer 2

Just move the Model binding part from onBeforeShow to onInit.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script id="sap-ui-bootstrap" type="text/javascript" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_belize" data-sap-ui-xx-bindingSyntax="complex">
    </script>

    <script id="view1" type="sapui5/xmlview">
        <mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" controllerName="my.own.controller">
            <Panel headerText="Pump Filter" expandable="true" id="filterPanel" expand="onPanelExpand">
                <content>

                    <Select id="pumpSelect" items="{ path: '/Rowsets/Rowset/0/Row'}" change="onPumpSelect" forceSelection="false" width="200px">
								<core:Item key="{ID_PUMP}" text="{DS_PUMP}" />
					</Select>

                </content>
            </Panel>
        </mvc:View>
    </script>


    <script>
        // define a new (simple) Controller type
        sap.ui.controller("my.own.controller", {

            onInit: function() {

                var that = this;

                var oData = {
                    "Rowsets": {
                        "DateCreated": "2016-08-04T8:15:47",
                        "Version": "15.0 SP6 Patch 3 (Mar 23, 2016)",
                        "StartDate": "2016-08-04T8:15:47",
                        "EndDate": "2016-08-04T8:15:47",
                        "CachedTime": "",
                        "Rowset": [{
                            "Columns": {
                                "Column": [{
                                        "Name": "ID_PUMP",
                                        "SourceColumn": "ID_PUMP",
                                        "Description": "ID_PUMP",
                                        "SQLDataType": 4,
                                        "MinRange": 1,
                                        "MaxRange": 1
                                    },
                                    {
                                        "Name": "DS_PUMP",
                                        "SourceColumn": "DS_PUMP",
                                        "Description": "DS_PUMP",
                                        "SQLDataType": 12,
                                        "MinRange": 1,
                                        "MaxRange": 1
                                    }
                                ]
                            },
                            "Row": [{
                                    "ID_PUMP": 100,
                                    "DS_PUMP": "Pump_100"
                                },
                                {
                                    "ID_PUMP": 200,
                                    "DS_PUMP": "Pump_200"
                                },
                                {
                                    "ID_PUMP": 300,
                                    "DS_PUMP": "Pump_300"
                                }
                            ]
                        }]
                    }
                };

                var oPumpModel = new sap.ui.model.json.JSONModel(oData);
                this.getView().setModel(oPumpModel);

            },
        });



        // instantiate the View
        var myView = sap.ui.xmlview({
            viewContent: jQuery('#view1').html()
        }); // accessing the HTML inside the script tag above


        myView.placeAt('content');
    </script>

</head>

<body id='content' class='sapUiBody'>
</body>

</html>