Re: How to add first item as a "Select" text in dropdown when all other items are coming from Server?

Hi Deepak,

I have the following solution to your 2 queries:

1. To add "Select..." item to sap.m.Select control when all other items are coming from OData service, you have to attach a Binding change event on the select control and then explicitly create a sap.ui.core.Item and add to the required select control. (Code snippet attached below)
2. You cannot get the information of the selected item directly from the odata model. You will have to create another model as JSON model and bind the selectedKey property of sap.m.Select control to this json model. So whenever user will select any item, the corresponding property of JSON model binded to selectedKey property of sap.m.Select control will get updated with the selected Item's key. (code snippet attached below)

View code snippet:

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"   controllerName="xmlodatamodel.ListBox" xmlns:html="http://www.w3.org/1999/xhtml">  <Page title="Title">  <content>  <Select id="mySelect" items="{/Categories}" selectedKey="{myModel>/selectedKey}">  <core:Item text="{CategoryName}" key="{CategoryID}"></core:Item>  </Select>  <Button id="myButton" press="myButtonPress" text="Get Selected Item Key"></Button>  </content>  </Page></core:View>

Controller code snippet:

jQuery.sap.require("sap.m.MessageBox");
sap.ui.controller("xmlodatamodel.ListBox", {  onInit: function() {  var oSelect = this.byId('mySelect');  //create a jsonModel to bind the selectedKey property of Select control  var oJSModel = new sap.ui.model.json.JSONModel({});  this.getView().setModel(oJSModel,"myModel");  var serviceurl = "proxy/http/services.odata.org/V3/Northwind/Northwind.svc/"  var oModel = new sap.ui.model.odata.ODataModel(serviceurl,true);  this.getView().setModel(oModel);  //get the reference of Select control model binding  var oBinding = oSelect.getBinding("items");  //attach a binding change handler to append Select... item to select control items  oBinding.attachChange(function(){  var oItem = new sap.ui.core.Item({text:"Select..."});  var oSelect = this.byId('mySelect');  oSelect.insertItem(oItem,0);  }, this);  },  myButtonPress : function (oEvent) {  var oSelect = this.byId('mySelect');  var controlSelectedKey = oSelect.getSelectedKey();  var oJSModel = this.getView().getModel("myModel");  var modelSelectedKey = oJSModel.getProperty("/selectedKey");  sap.m.MessageBox.show(  "From Control : " + controlSelectedKey + "\n" +  "From Model : " + modelSelectedKey, {           icon: sap.m.MessageBox.Icon.INFORMATION,           title: "Selected Key Values",           actions: [sap.m.MessageBox.Action.OK]       }  );  }
});

Hope this answers both your queries.

Thank you!! Happy UI5 Coding!!!

Regards,

Parag