providing a blank option in the combobox sapui5

Question

I am trying to populate a dropdownbox in SAPUI5 from a json

      new sap.ui.commons.DropdownBox(this.createId('inpExpenseType'), {
                                selectedKey: '{ExpenseType/Id}',
                                editable: '{/CanEditPayment}',
                                required: "{/CanEditPayment}",
                                displaySecondaryValues: true,
                                items: {
                                    path: 'parameters>/Benefits',
                                    template: new sap.ui.core.ListItem(this.createId('liExpenseType'), {
                                        key: '{parameters>Id}',
                                        text: '{parameters>Name}',
                                        additionalText: '{parameters>Code}'
                                    })
                                },
                                layoutData: new sap.ui.layout.GridData({span: 'L6 M6 S6'})
                            }).attachChange(oms.app.ModelUtils.handleListItemChange)

Now based on a condition for eg. if(status==='Approved'), I wish to show only one option in the dropdownbox. I used the below filter to get this done.

    if(state==='Approved'){
//this is the option I wish to display in the dropdownbox.
        aFilters.push(new sap.ui.model.Filter("Id", sap.ui.model.FilterOperator.EQ, "33"));
    }
    odropdownbox.bindItems('parameters>/Benefits', oTemplate, null, aFilters); 

Now my problem is that this single option is getting defaulted in the dropdownbox so the onChange event would not be triggered.

I tried to default a blank item as below

   if(State==='Approved'){
        var oItem = new sap.ui.core.ListItem({
            key: 'dummy',
            text: '',
            additionalText: ''
        });
        odropdownbox.insertItem(oItem,0); 
        odropdownbox.setSelectedKey('dummy');
    }

But this does not make any difference and I see the single option populated as default.

How can I solve this? Is there some clean way to manipulate the json list?

Answer 1

No need to add the new item.

Use fireChange after you bind the items so that you have no issues.

odropdownbox.bindItems('parameters>/Benefits', oTemplate, null, aFilters);
odropdownbox.fireChange();