What is the syntax for a radio group?

[Whip]

I've checked all the demos and readme but I couldn't find any example of a radio group. Basically I want a few radio checkboxes and enabling one should disable others. Right now, I can enable all the radios and disable none.

[KirilOkun]

+1. i think I understood from the example but the main document should really include a clear writeup of how to setup radio group instead of just punting to the uncommented example code.

[Whip]

I couldn't find anything. Could you post an example?

[KirilOkun]

It's in the angular demo app. From what i can tell there are no separate settings in the xml. The group management is done in the code behind. Take a look at the event handler functions for the checkbox in Tab 2. https://github.com/nstudio/nativescript-checkbox/blob/master/demo-ng/app/item/items.component.html

[Whip]

Thanks @bearoutthere . I'll see what I can do for regular javascript from that. There is no code in the normal demo folder for this. I'd still like the author to add this in the documentation.

[KirilOkun]

I looked at the example and it seemed over complicated. Maybe it's due to the Angular syntax, which i'm not familiar with. The easiest approach i ended up with was to use the list view model array directly. In the template use listview's index for the checkbox like so:

<ListView id="personsList" items="{{ personSelections }}" itemTemplateSelector="$index">
<ListView.itemTemplate>
<cb:CheckBox id="{{ $index }}" checked="{{ selected }}" text="{{ name }}" boxType="circle" loaded="onCheckboxLoaded" tap="onPersonTap" ></cb:CheckBox>
</ListView.itemTemplate>
</ListView>

then in code behind handler function use the model list to go through the list and unset all list items' selected properties. After the tap event the selected checkbox component will set it's selected property to true. Make sure that the items in the source ObservableArray are also of type Observable, otherwise the property change will not be reflected on the other checkboxes.

export function onPersonTap(args) {
    // when a radio button is selected unselect all radio buttons in the list.
    // checkbox will set the selected item's checked property to true after the tap event.
    pageData.personSelections.forEach((item, index, array) => {
        item.selected = false;
    });
}

That will keep only the clicked item selected and all the others unselected.

[cfjedimaster]

I'm still struggling with this - has anyone does this in Vue?

[enzome]

It works as radio like this - for Vue.

<Template>
(...)
                <StackLayout>
                    <StackLayout v-for="(group,groupkey) in item.groupedchoices" :key="groupkey">
                        <check-box v-for="(choice, choicekey) in group" :key="choicekey" :text="choice.name" :checked="choice.checked" @checkedChange="ticked($event.value, groupkey, choicekey, choice)" />        
                    </StackLayout>
                </StackLayout>
(...)
</Template>
<script>
(...)
        ticked(val, groupkey, choicekey, choice) {
            // this.item.groupedchoices[groupkey].each.checked = false;

            this.item.groupedchoices[groupkey].forEach(grc => {grc.checked = false});
            setTimeout(()=> {this.item.groupedchoices[groupkey][choicekey].checked = val}, 30);
        },

</script>