Question Re: De-select radio button on navigation in Technology Q&A

De-select radio button on navigation

former_member337435 — Wed, 18 May 2022 22:57:54 GMT

Hi ,

I have a home page.From the home page,I navigate to the StatusManagement Home Page. On the statusManagement Home page, I select a id and I navigate to the another page with the id. This page shows me the list of radio buttons with the text.

The view code for the radio buttons is shown below.

<Label labelFor="group0" text="Select the next status that you want to transition the MatrixID" /> <RadioButtonGroup columns="1" id="group0" buttons = "{statusmodel>/ODataset/results}" selectedIndex= "-1" width="500px" class="sapUiSmallMargin">

<RadioButton id= "selbutton" text="{statusmodel>TARGET_CTRL_STATUS}" customData:targetStatusCode="{statusmodel>TARGET_CTRL_STATUS_CODE}" selected = "false"/>

</RadioButtonGroup>

When I come for the first time to this screen , none of the radio buttons are selected which is what I want. I select a radio button and click on Submit. The controller takes care of the back end processing and then a success dialog message is shown and when the user clicks on OK it goes back to the status Management Home Page.

Again from the status Management Home page when I select the same id or a different id , whatever was the selected Index of the radio button on the previous navigation shows as selected.

Everytime I traverse to the screen with radio buttons I want all the radio buttons to be deselected.

Below is the routing code in the controller.

var oRouter1 = sap.ui.core.UIComponent.getRouterFor(that);

oRouter1.navTo("StatusTransitionManagement",{

ID : selectedID

},false);

What should I do to make sure that all radio buttons are deselected every time I go to that page.

Thanks in advance

Re: De-select radio button on navigation

sonalika_porwal — Thu, 19 May 2022 07:12:33 GMT

Hi Lalitha,

You can try this scenario:

Bind a property to the selected property of RadioButton. For example:

<RadioButton id= "selbutton" 
text="{statusmodel>TARGET_CTRL_STATUS}" 
customData:targetStatusCode="{statusmodel>TARGET_CTRL_STATUS_CODE}" 
selected = "{/isRadioButtonSelected}"/>

Now, whenever you land on the radio buttons page, make the /isRadioButtonSelected property false. ( You can do that in your route-matched event handler).
You need to set your selected property as false whenever the route pattern is matched.

Re: De-select radio button on navigation

ashwink02 — Thu, 19 May 2022 07:45:29 GMT

Hi Lalitha,

You can also try this by adding below code in routeMatched Method of the view

var oIDRadioButtonGroup = this.byId("group0"); oIDRadioButtonGroup.setSelectedIndex(-1);

Re: De-select radio button on navigation

former_member337435 — Thu, 19 May 2022 16:49:45 GMT

Thanks Sonalika !

Re: De-select radio button on navigation

former_member337435 — Thu, 19 May 2022 16:49:59 GMT

Thanks Ashwin. I tried this and it worked