SAPUI5 : How to update display on SelectedKey change?

[Former Member]

I have problem with display information. I need to set the values from the Drop box.

Code from clothing.json

{
  "catalog": {
    "clothing": {
      "categories": [
        {"name": "Women", "categories": [
          {"name":"Clothing", "categories": [
            {"name": "Dresses", "categories": [
              {"name": "Casual Red Dress", "amount": 16.99, "currency": "EUR", "size": "S"},
              {"name": "Short Black Dress", "amount": 47.99, "currency": "EUR", "size": "M"},
              {"name": "Long Blue Dinner Dress", "amount": 103.99, "currency": "USD", "size": "L"}
            ]},

Code from View.xml

<Column id="colSize" width="11rem">
  <m:Label text="Size"/>
  <template>
     <m:Select
        id = "selSize"
        selectedKey="{size}"
        items="{path: '/sizes', templateShareable: true}"
        visible="{= !!${size}}"
        forceSelection="false">
        <core:Item key="{key}" text="{value}"/>
      </m:Select>
   </template>
 </Column>

and part the code from Controller.js

 onPressBtnSetSize: function() {
        var oComboBox = this.byId("cbxSelectSize"),
            sKey = oComboBox.getSelectedItem().getKey(),
            oSelect = this.byId("selSize");
            oSelect.setSelectedKey(sKey);       
    }

Now, when I call the method getSelectedKey(). I get the meaning of my sKey. But the display in the table does not change.

I think need to refresh the table. But all my attempts failed. Kindly help!

[Ivan-Mirisola · Accepted solution]

Hi Roman,

Your table will display the data in your model (JSON Model). So if you need it to display changes based on the selected key from the combo box element, your code needs to loop through the elements on the JSON model and change the corresponding values. Since your code is incomplete, there is no way we can understand how the JSON model is being created. But I assume you set the view's model on component initialization or controller's init method. Either way, the event handler for the Combo box element would need to change the corresponding JSON string and set it again so the view receives the notification to repaint.

Also, please check that the model is being set as two-way-data-binding. Usually if you are not using method setDefaultBindingMode on your JSON Model than the default would be two-way.

Regards,
Ivan

[Former Member · Accepted solution]

Thanks for the answer.

Could you, tell me. How can I quickly access fields "size"?
since, I only know the long way:
this.getView().getModel().getProperty("/catalog/clothing/categories");

....

and as I understand, it will take a lot of code

.....

[Ivan-Mirisola · Accepted solution]

Hi Roman,

Not sure what you mean by getting the field size. Are you referring to a JSON attribute value? Or are you referring to performing a loop on the categories and you want to know how many are there in your json string? If it is the latter, please check this site for JQuery examples. Otherwise, please be more specific.

Regards,
Ivan

[Former Member · Accepted solution]

Yes

I referring to a JSON attribute value ("size").

Regards,
Roman

[Ivan-Mirisola · Accepted solution]

in that case you could loop thru the values on your json model and replace the values from "size" attribute using the example mentioned (jquery.each).

[former_member182862]

Hi Roman

Sorry we are unable to understand your requirement. It is kind of hard to figure out what are your intention.

here is what I believe you are looking for. Sorry if I get it wrong

http://jsbin.com/lutocan/

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

Thanks

-D

[irfan_gokak]

Hi,

What do you want to do on getting the key in the table?

[Former Member]

Hi,

At first, I thought that I could just change the value of the property "selectedKey" inside the container <Select>.

I tried to do it this way:

onPressBtnSetSize:function(){
        var oComboBox = this.byId("cbxSelectSize"),
            sKey = oComboBox.getSelectedItem().getKey(),
            oSelect = this.byId("selSize");
            oSelect.setSelectedKey(sKey);}

But, apparently, it does not work like that.

Now, I want to access to a JSON attribute value ("size"). And change it

Regards,
Roman

[irfan_gokak]

Hi,

Can you tell me how you're setting value to the combo box. I mean show me the code how you're binding values to thecbxSelectSize this combo box