Skip to Content
author's profile photo Former Member
Former Member

Selected Index returns undefined for RadioButtons

Hello,

I am using sap.m.Table and binded the OData model with the table. I am using Radio Buttons in the table and the number of rows will be dynamic.

I have ensured that the groupName property for RadioButton should be unique in order to select only one radio button by the user.

The Model binding is fine and based on the back end Odata value for field Status the selected property value was filled and the radio button status are set based on that field . Upon i select any of the values in radio button for each row, I am unable to get the selectedIndex in the event handler method of select event. Getting the undefined as the value.

Below is my code snippet. Kindly let me know how to get the selected index/ how can i identify which radio button is selected and bind the value to the model.In the controller event handler methods, the below code returns as undefined.

Code Snippet:

<Table id="StatusTable" inset="true" items="{/StatusDetails}">

<headerToolbar>

<Toolbar>

<Label text="Status Details" design="Bold"></Label>

</Toolbar>

</headerToolbar>

<columns>

<Column minScreenWidth="Tablet" demandPopin="true" >

<Text text="Emp No"/>

</Column>

<Column minScreenWidth="Tablet" demandPopin="true" >

<Text text="Name"/>

</Column>

<Column minScreenWidth="Tablet" width="4em" >

<Text text="Initiated(I)"/>

</Column>

<Column minScreenWidth="Tablet" demandPopin="true" >

<Text text="Hold(H)"/>

</Column>

<Column minScreenWidth="Tablet" demandPopin="true" >

<Text text="Approved (A) " />

</Column>

<Column minScreenWidth="Tablet" demandPopin="true" >

<Text text="Rejected(R)"/>

</Column>

</columns>

<items>

<ColumnListItem>

<cells>

<Text text="{Empno}"/>

<Text text="{Name}"/>

<RadioButton groupName="{EmpNo}{Name}" selected="{path:'Status', formatter:'.getOperStatusforInitiated'}" select="onStatusChangeInitiated" />

<RadioButton groupName="{EmpNo}{Name}" selected="{path:'Status' , formatter:'.getOperStatusforHold'}" select="onStatusChangeHold" />

<RadioButton groupName="{EmpNo}{Name}" selected="{path:'Status', formatter:'.getOperStatusforApproved'}" select="onStatusChangeApproved"/>

<RadioButton groupName="{EmpNo}{Name}" selected="{path:'Status' , formatter:'.getOperStatusforRejected'}" select="onStatusChangeRejected"/>

</cells>

</ColumnListItem>

</items>

</Table>

Controller Event handler for select event has the following code where this return the value as undefined. 

onStatusChangeStart: function(oEvent)

{

var idx= oEvent.getParameters().selectedIndex;

},

Kindly check and let me know why the value is returning as undefined and how can i identify the selected radio button and bind it to the model.

Thanks,

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

4 Answers

  • Posted on Aug 15, 2016 at 01:37 PM

    SUP,

    most likely it is the scope... the selectedIndex property belongs to the RadiobuttonGroup control.. not for the Radio Button control... see the scope of your oEvent parameter.

    when you trigger the select event, that is for the radio button. you may be able to get a handle of the radiobutton group then call the selectedindex property to get the selected radio button

    see is this helps

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Aug 15, 2016 at 02:08 PM

    Hello Serigo,

    As the values in the table will be dynamic, i have defined a groupName by concatenating the 2 of the field values.

    I am not sure how to get the handle of the RadioButtonGroup which was defined using the groupName parameter.

    Kindly suggest if any other better options to get to know which radio button is selected with this code snippet.

    Thank you for your support.

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Aug 16, 2016 at 12:05 PM

    Hello,

    Probably, you can use RadioButtonGroup instead of RadioButton for Index value. If you still wish to use RadioButton, define some value for "key" property and receive it using radiobtnobject.getKey() in the event handler. Value for Key property can be defined as 0,1,2,...etc.

    in the View:

    var oRadio = new sap.ui.commons.RadioButton("radioid", {key: "0",text: "radio",groupName: "rdgroup", select: oController.radioEH});

    in the Controller:

    radioEH: function(oEvent){

    var rad = sap.ui.getCore().byId("radioid");

    var idx = rad.getKey();

    sap.ui.commons.MessageBox.alert("index"+idx);

    }

    i am not comfortable with XML views but still you can use Event handler code.


    Thanks.

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Sep 06, 2016 at 08:32 AM

    Hi Manne,

    The solution you have proposed is for sap.ui.commons package where as i am working with the sap.m package in which the radio button does n't have the key property.

    I have solved it by reading the table's getCells APIs.

    Thanks,

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.