We have a set of radio checkboxes to allow user to select one of them. It works fine when it is just added to a view and the radio checkboxes are displayed vertically.
But the requirement is to display the radio checkboxes horizontally.
We used a table structure to do so. The display is working as expected, but the radio checkbox grouping does not work, i.e user can select multiple radio checkboxes of the same group.
We figured out that if the radio checkboxes are placed in the same container (view/ Container Element/table cell) they work fine, but if they are placed in a different containers and assigned same group ID they does not work as a group.
Please suggest how we achieve displaying radio checkboxes of same group horizontally.
Regards Vageesh Shadakshari
Global Consulting Servies - India
SoftwareAG | Bangalore
The requirement seems rather unusual - we normally wouldn’t recommend horizontal placement. The only way I can currently think of accomplishing it is direct positioning/sizing of the components (specifically setting setWidth/setX/setY) within a convenient container or table or something.
Difficult for me to give a full appraisal on the little info I have, but it sounds like a odd use case. I can’t think of a situation where Radio buttons, side-by-side, would be a natural UI convention. Perhaps these should just be buttons, or even a custom UI element?
I’d be happy to advise further if you wanted to send me some mockups/design spec etc.
This shouldn’t be achieved using radio checkboxes. I can see why an old school desktop application might have used radio buttons (with each one labeled with a rating) but this is not the approach to take on mobile.
To recreate the type of interface shown in your attached image you should just create two star assets (on and off) and place them in a table with five cells. Each image will be clickable (from the docs: You can make a simple image behave like a button and generate EVT_TRIGGER events by calling setTriggerable(true) when a user selects the image.).
Then you just need a bit of logic to switch the relevant images to on or off.
Using radio buttons can’t give you the effect of 3 out of 5 being on.
