UI5 oData and two depended selection

Question

I'm trying to create two dynamic selection lists using SAPUI5 and XML as developing paradigm for views.

Here is example of my oData model:

1. /EmployeeSet - return two entities:
   • Pernr = '00000001'
   • Pernr = '00000002'
2. /EmployeeSet('00000001') - return one entity:
   • Pernr ='00000001' Name = 'Jacob'
3. /EmployeeSet('00000002') - return one entity:
   • Pernr ='00000002' Name = 'Matthew'
4. /EmployeeSet('00000001')/KidsListSet - returns two entities:
   • PernrKid = '00000010' Name = 'Sophia'
   • PernrKid = '00000011' Name = 'James'.
5. /EmployeeSet('00000002')/KidsListSet - returns three entities
   • PernrKid = '00000020' Name = 'Alexander'
   • PernrKid = '00000021' Name = 'Zoe'
   • PernrKid = '00000022' Name = 'Oliver'

Select1 is working as expected, default value is there and on click action I can see two values.

Two selects:

<Select id="select1" width="100%" items="{ path: '/EmployeeSet' } change="handleSelect1">
<core:Item key="{Pernr}" text="{Name}" />
</Select>

<Select id="select2" width="100%" items="{ path: '/KidsListSet' }>
<core:Item key="{PernrKid}" text="{Name}" />
</Select>

Code for handleAssigment function:

handleAssigments : function(evt){
  var context = evt.getParameter("selectedItem").getBindingContext();
  var Path = context.getPath() + '/KidsListSet';
  var select2 = this.getView().byId("select2");

return select2.bindAggregation("items", Path, new sap.ui.core.Item({ key : "{PernrKid}", text : "{Name}" }));
},

When I change value in select1, select2 is updated and I see two or three entries (based on first selection)

However I have few questions:

1. How can I pre-populate default value for select2 (e.g. PernrKid = '00000010' Name = 'Sophia')

2. Maybe it's possible to do data binding without creating a new select Item in the view controller?

Thanks!

Updated: 06/02/2014

How I set oData model:

 // create root view
        var oView = sap.ui.view({
            id: "app",
            viewName: "view.App",
            type: "JS",
            viewData: { component : this }
        });


        // Load oData Model
        var sServiceUrl = "/sap/opu/odata/sap/YKIDS/";
        var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true, "", "");

        oView.setModel(oModel);

...

V.

Answer 1

Wouldn't it be better to show placeholders or blank in the Selects if they have not been selected, showing actual values may mislead users into thinking they are set?

Alternatively, I am not sure how you would do it in the view, but you could listen on select1's binding onInit of the controller and update select2 from the first row of the bindings of select1

onInit: function(){    
var oSelect1 = this.getView().byId("select1");
var oBinding = oSelect1.getBinding("items");

var handler = function(oEvent) {

    //release the handler
    oBinding.detachDataReceived(handler);

    //get the first row of select1
    var aContexts = oEvent.oSource.getContexts();
    var row1 = aContexts[0];

    //get path to first rows kid list
    var Path = row1.getPath() + '/KidsListSet';

    //put values for first rows path into model either via select2 or the model
    eg  oModel.bindList(path)
    or select2.bindAggregation("items", Path ....

};
... set up model
var oModel = new ....

//attach handler
oBinding.attachDataReceived(handler);