how to bind the data for radiobutton group in XML view?

[preethi_ande]

Hi Team,

Am unable to bind the data for radiobuttons, am using XML view,

I have tried like below, but am getting errors.

<RadioButtonGroup id="rbg_id" items="{oDataRateAmnt>/SlabTypes}"  columns="2" selectedIndex="{oHeader>/rateAmntCode}"  >

     <core:Item id="IdItems" key="{oDataRateAmnt>SlabTypeCode}" text="{oDataRateAmnt>SlabTypeDesc}"></core:Item>

</RadioButtonGroup>

Binding model is:

var oModelData = new sap.ui.model.json.JSONModel(aData);

this.getView().byId("rbg_id").setModel(oModelData, "oDataRateAmnt");

this.getView().byId("rbg_id").bindAggregation("items","oDataRateAmnt>/", that.getView().byId("IdItems"));

error--> Uncaught Error: "Element sap.ui.core.Item#idschemecrt--IdItems" is not valid for aggregation "buttons" of Element sap.m.RadioButtonGroup#idschemecrt--rbg_id

same error if am including buttons tag,

<buttons>

   <core:Item id="IdItems" key="{oDataRateAmnt>SlabTypeCode}" text="{oDataRateAmnt>SlabTypeDesc}"></core:Item>

   </buttons>

I have followed this thread also

but am unable to bind for XML

please suggest me.

Thanks,

Preethi

[saivellanki · Accepted solution]

Hi Preethi,

Items is not valid aggregation for Radio Button Group. You have to use buttons.

Check this code -

My XML View -

<mvc:View
  controllerName="I5Path.Controllers.i5Home"
  xmlns:l="sap.ui.layout"
  xmlns:core="sap.ui.core"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:s="sap.suite.ui.commons"
  xmlns="sap.m">
      <RadioButtonGroup buttons="{/modelData/riskData}" width="500px" class="sapUiMediumMarginBottom" >
<RadioButton text="{Text}" selected = "{Selected}" />
</RadioButtonGroup>
</mvc:View>

My Controller and Model -

sap.ui.controller("I5Path.Controllers.i5Home", {


  onInit : function () {
    //set explored app's demo model on this sample
  var model = new sap.ui.model.json.JSONModel();
  model.setData({
  modelData: {
  riskData : [{"Text":"High / 1", "Selected":true},{"Text":"Medium / 2", "Selected":false},{"Text":"Low / 3", "Selected":false},{"Text":"Other / 5", "Selected":false}]
  }
  });
  sap.ui.getCore().setModel(model);
  }
});

Output -

Regards,

Sai Vellanki.

[preethi_ande · Accepted solution]

Thanks a lot Sai,

Its working fine, but how can I get the selected value here,

I get the value by using selectedKey property for the dropdown. Like this which property for RadioButtonGroup, seletedIndex returns only integer right, but i want to get the key value.

Please suggest me,

Thanks,

Preethi

[saivellanki · Accepted solution]

Hi Preethi,

Include Select Event in Radio Button Group control like this -

<RadioButtonGroup buttons="{/modelData/riskData}" select="onSelectRadio" width="500px" class="sapUiMediumMarginBottom" >

And in the function onSelectRadio() of controller -

  onSelectRadio: function (oEvent) {
    var oSelectedIndex = oEvent.getParameter("selectedIndex");
    var oRadioButtonSrc = oEvent.getSource().getAggregation("buttons");
    var oSelectedRadioText = oRadioButtonSrc[oSelectedIndex].getText();
  }

Now your oSelectedRadioText variable will have text depending on the radio button selection you made -

Regards,

Sai Vellanki.