can some one please advise on the two-way data binding of the radio buttons with SAP UI5. In the data model I have an attribute called textType, it can return "Y" or "N", based on that I have to select the correspondent radio button
<m:RadioButton text="yes" selected="{path:'/textType',formatter: function(val){ if(textType== 'Y') return true; }else{ return false} }"/><m:RadioButton text="No" selected="{Selected}"/>
however I am not able to set the value. I tried using the radiobutton group however no success
<RadioButtonGroup buttons="{/Type}" >
<RadioButton text="YES" selected = "{Selected}" />
<RadioButton text="No" selected = "{Selected}" />
</RadioButtonGroup>
can some one pls advise on this .
Updating the model data code .
var stermType = this.getView().byId("rbgTermType").getSelectedButton().getText(),
sElecReg = this.getView().byId("rbgElecReg").getSelectedButton().getText(),
sOpenReg = this.getView().byId("rbgOpenReg").getSelectedButton().getText(),
sConfirmgdpr = this.getView().byId("idConfirmgdpr").getSelected(),
oData = {};
oData = {
Term_Type: stermType,
Electoral_Reg: sElecReg,
Open_Reg: sOpenReg,
Data_Protection_Confirm: sConfirmgdpr,
};
this.getView().setBusy(true);
var that = this;
var mParams = {
success: function () {
that.getView().setBusy(false);
}.bind(),
error: function (err) {
that.getView().setBusy(false);
that.fnShowErrorMessage(jQuery.parseJSON(err.responseText).error.message.value)
}.bind()
};
this.getOwnerComponent().getModel().update( "/PassportVisaBankCitizenshipDetailsSet(StudentObjid='',PassportNumber='',AccountNumber='')", oData, mParams);
this.getOwnerComponent().getModel().refresh(true);
Well, if the property textType
has either value Y or N, you will need to use expression binding:
<RadioButtonGroup >
<RadioButton text="YES" selected = "{= ${textType}==='Y'}" />
<RadioButton text="No" selected = "{= ${textType}==='N'}" />
</RadioButtonGroup>
The disadvantage is that you lose two-way when using expression binding. So you will need an onSelect Event handler (check event name in api docs)
If your property would be a Boolean, then you could just use
<RadioButtonGroup >
<RadioButton text="YES" selected = "{textType}" />
<RadioButton text="No" selected = "{=!${textType}}" />
</RadioButtonGroup>
and be done
UPDATE: Here is a working example: https://jsfiddle.net/iPirat/yhj3eabv/
I have put the thwo above Radio Button Groups in place, using the sample model with content
{
textType1: 'N',
textType2: true
}
The first {RadioButtonGroup} is working with {textType1} and an event handler is necessary
The second {RadioButtonGroup} is working with the boolean {textType2} and no event handler is needed. Binding does everything for you.