Skip to Content
0

Questions regarding TwoWayBinding of a ComboBox

Oct 29, 2016 at 10:49 PM

91

avatar image

Hi,

i have a question regarding two-way-binding and comboboxes. As far as I understood, I can create an instance of JSON-Model during e.g. "onInit" and add this model to a view using "setModel()". When I bind a control within this view, e.g. an input box, by setting value="{/someValue}", the underlying model gets the value of that control attached. So when I want to post the model to the backend, I can use a jQuery Ajax call and set the data value of that call to something like

data: JSON.stringify(this.getView().getModel().oData)

This works fine and sends an JSON object back to the server with a property named "someValue".

When I want a control to have initial values (in my case a combobox) my idea was to initially fill the JSON-model during "onInit" with the values I want to bind, e.g.

            var oModel = new sap.ui.model.json.JSONModel();
            var oData = {
                gender: [
                    { "key" : 0, "Text": "-Please select-"},
                    { "key": 1, "Text": "Male"},
                    { "key": 2, "Text": "Female"}
                ]
            };
            oModel.setData(oData);
            oView.setModel(oModel);

And bind the ComboBox like this

                <Label text="Gender"/>
                <ComboBox id="dd_gender" selectedKey="0" items="{/gender}">
                  <items>
                    <core:Item key="{key}" text="{Text}" />                    
                  </items>
                </ComboBox>

This also works fine and initially fills the Dropdown as expected. But when I post the data back to the server like mentioned before, I always get the whole initially set values back instead of only the selected one. What am I doing wrong? Is this the correct way of binding a model to a view and then post the whole model back or is it normal that I first have to manually check the selected items of the combobox and create a new model to be sent back to the server?

Thanks,

Oliver

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Dennis Seah
Oct 30, 2016 at 03:48 AM
0

Hi Oliver

You can have a property in the model for options and another property for selected value like this

http://jsbin.com/mitered/edit?html,js,output

hope this help.

thanks

-D

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Thank you Dennis, that helped a lot.

0
Jun Wu Oct 30, 2016 at 12:45 AM
0

you just don't need to post whole json model back to server.

the value that the control hold and the dropdown list value are different things, they can come from different model, now you put them in one model, that's how thing get messed up.

so you can do this: create one model to hold the control value, another model to hold the dropdownlist element

then you can post the whole json model back as you wished.

Share
10 |10000 characters needed characters left characters exceeded
Akhilesh Upadhyay Oct 30, 2016 at 07:50 AM
0

Hello,

you need to have initial key value in your data itself and bind that initial value to your combobox as selectedKey instead of selectedKey="0", try below:

data should be as below:

            var oData = {
            initialKey:"0",
                gender: [
                    { "key" : 0, "Text": "-Please select-"},
                    { "key": 1, "Text": "Male"},
                    { "key": 2, "Text": "Female"}
                ]
            };

and combobox as :

<Label text="Gender"/>

<ComboBox id="dd_gender" selectedKey="{initialKey}" items="{/gender}">
  <items>
    <core:Item key="{key}" text="{Text}" />
  </items>
</ComboBox>

now you will have selected value in initialKey property.

hope this help.

Regards,

Akhilesh

Share
10 |10000 characters needed characters left characters exceeded