Nativescript-radiobutton using dynamic


#1

Hello,

I need create radio buttuns.
I’m trying use the plugin - nativescript-radiobutton.
My xml:

<Page loaded="pageLoaded" xmlns:lv="nativescript-ui-listview">
  <Page.actionBar>
      <ActionBar title="{{ title }}" class="action-bar"></ActionBar>
  </Page.actionBar>
  <GridLayout id="grd1" columns="80, *, auto" rows="auto, *" >
  </GridLayout>
</Page>

JS:

var view = require("ui/core/view");
var layout = require("ui/layouts/grid-layout");
var gridLayout = new layout.GridLayout();

function pageLoaded(args) {
    var page = args.object;

    var grdview = view.getViewById(page, "grd1");
}
exports.pageLoaded = pageLoaded;

How I can add new radiobuttons in Gridlayout ?


#2

nativescript-radiobutton might work until you are developing only for android. If you are looking for a cross platform one that works in iOS too, use nativescript-checkbox plugin.

You can use a Repeater to loop through your array of data and create radio buttons (or any component)/
https://docs.nativescript.org/cookbook/ui/repeater


#3

I tried this example,
XML:

<Page loaded="pageLoaded">
    <Label row="0" text="Binding the Repeater items property to collection" textWrap="true" />
    <Button row="1" text="Add new item" tap="onTap" />
    <ScrollView row="2">
        <Repeater  id="firstRepeater" items="{{ myItems }}" />
    </ScrollView>
    <Label row="3" text="Define the Repeater itemTemplate property" textWrap="true" />
    <Button row="4" text="Add new item (Second Repeater)" tap="onSecondTap" />
    <ScrollView row="5" orientation="horizontal">
        <Repeater items="{{ mySecondItems }}">
            <Repeater.itemsLayout>
                <StackLayout orientation="horizontal" />
            </Repeater.itemsLayout>
            <Repeater.itemTemplate>
                <Label text="{{ $value }}" margin="10" />
            </Repeater.itemTemplate>
        </Repeater>
    </ScrollView>
</Page>

JS:

var view = require("ui/core/view");

const repeaterModule = require("tns-core-modules/ui/repeater");

const colors = ["red", "green", "blue"];
const secondColorsArray = new observableArrayModule.ObservableArray(["red", "green", "blue"]);

function pageLoaded(args) {
    var page = args.object;
    const vm = new observableModule.Observable();

    vm.set("myItems", colors);
    vm.set("mySecondItems", secondColorsArray);

    page.bindingContext = vm;

    colors.push("yellow");

}

exports.pageLoaded = pageLoaded;

Result:


#4

A Page / ScrollView is not a layout but ContentView. Only layouts are designed to hold multiple child elements. A ContentView can hold only one child element. So only last ScrollView is really added to your page, you might want to fix that.

Secondly, observableArrayModule and observableModule are undefined in your JS code, you must import / require them first.


#5

I tried so much:

<Page loaded="pageLoaded" xmlns:lv="nativescript-ui-listview"-->
    <Label row="0" text="Binding the Repeater items property to collection" textWrap="true" />
    <Button row="1" text="Add new item" tap="onTap" />
    <ScrollView row="2">
        <Repeater  id="firstRepeater" items="{{ myItems }}" />
    </ScrollView>
    <Label row="3" text="Define the Repeater itemTemplate property" textWrap="true" />
    <Button row="4" text="Add new item (Second Repeater)" tap="onSecondTap" />
    <ScrollView row="5" orientation="horizontal">
        <Repeater items="{{ mySecondItems }}">
            <Repeater.itemsLayout>
                <StackLayout orientation="horizontal" />
            </Repeater.itemsLayout>
            <Repeater.itemTemplate>
                <Label text="{{ $value }}" margin="10" />
            </Repeater.itemTemplate>
        </Repeater>
    </ScrollView>
</Page>

JS:

var view = require("ui/core/view");
var observableArrayModule = require("data/observable-array");

const repeaterModule = require("tns-core-modules/ui/repeater");

const colors = ["red", "green", "blue"];
const secondColorsArray = new observableArrayModule.ObservableArray(["red", "green", "blue"]);

function pageLoaded(args) {
    var page = args.object;
    const vm = new observableModule.Observable();

    vm.set("myItems", colors);
    vm.set("mySecondItems", secondColorsArray);

    page.bindingContext = vm;

    colors.push("yellow");

}

exports.pageLoaded = pageLoaded;

#6

I believe you are a newbie, so I suggest you to take one step at a time. If you are not from a JS background, learn JS first. Then go through {N} basics.

Finally give little more attention,


#7

If they weren’t defined, will be error.
It’s works.


#8

It usually throws error until it’s not a production build. You may try with playground.


#9

Result,


#10

I want to try this example:

What code should be in js in this example?


#11

xml:

<Page 
  xmlns="http://schemas.nativescript.org/tns.xsd" 
  xmlns:CheckBox="nativescript-checkbox" loaded="pageLoaded">
  <ActionBar title="Native Checkbox" />
  <StackLayout>
    <CheckBox:CheckBox boxType="circle" text="CheckBox Label-1" checked="false" checkedChange ="checkchanged"/>
    <CheckBox:CheckBox boxType="circle" text="CheckBox Label-2" checked="false" checkedChange ="checkchanged"/>
  </StackLayout>
</Page>

js:

var view = require("ui/core/view");
var topmost = frameModule.topmost();
  
function pageLoaded(args) {
    var page = args.object;
}

function checkchanged(args){
    console.log("Test check");
}

exports.pageLoaded = pageLoaded;
exports.checkchanged = checkchanged;

When I click to checkbox, function checkchanged didn’t ran.
Help please,


#12

Property change events like checkedChange here do not work when added from XML, it’s a limitation with Core {N}. Workaround is to add your listeners programmatically in loaded events.


#13

Please, help me,

How to do it ?


#14

Here is how he does it for a switch, follow similar syntax.


#15

I tried to use it. It turned out this way:

xml:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:CheckBox="nativescript-checkbox" navigatingTo="navigatingTo" class="page">
    <StackLayout class="p-20">
        <Switch checked="true" loaded="onSwitchLoaded"/>
        <CheckBox:CheckBox boxType="circle" text="CheckBox-1" id="chb1" checked="false" loaded ="toggleCheck"/>
        <CheckBox:CheckBox boxType="circle" text="CheckBox-2" id="chb2" checked="false" loaded ="toggleCheck"/>
    </StackLayout>
</Page>

ts:

import { EventData } from 'data/observable';
import { Switch } from 'ui/switch';
import { Page } from 'ui/page';
import { CheckBox } from 'nativescript-checkbox';
import { topmost } from 'ui/frame';

export function navigatingTo(args: EventData) {
    let page = <Page>args.object;
}

export function onSwitchLoaded(args) {
    let sw = <Switch>args.object;
    sw.on("checkedChange", (args) => {
        console.log("onSwitchLoaded-ts");
        console.log(sw.checked);
    })
}

export function toggleCheck(args) {
    let checkBox = <CheckBox>args.object;
    checkBox.on("checkedChange", (args) => {
        console.log("toggleCheck-ts");
        console.log(checkBox.checked);
        //checkBox.toggle();
    })    
  }

When I checked one, needs uncheck others.
How can I ?

console.log:

JS: toggleCheck-ts
JS: true
JS: toggleCheck-ts
JS: true
JS: onSwitchLoaded-ts
JS: false


#16

How can I mark all the elements of the checkbox?


#17
var all_chb=allpage1.parent.getElementsByTagName('CheckBox:CheckBox');

TypeError: allpage1.parent.getElementsByTagName is not a function


#18
import { EventData } from 'data/observable';
import { Switch } from 'ui/switch';
import { Page } from 'ui/page';
import { CheckBox } from 'nativescript-checkbox';
import { topmost } from 'ui/frame';
var domnodes = require("nativescript-dom");


export function toggleCheck(args) {
    let curCheckBox = args.object;
    let cur_id=curCheckBox.id;

    var all_chb=curCheckBox.parent.getElementsByTagName('CheckBox');

    curCheckBox.on("checkedChange", (args) => {
        console.log("toggleCheck-ts");
        for (var z = 0; z < all_chb.length; z++) {
            console.log(z+'='+all_chb[z].id);
            if (all_chb[z].id!=cur_id){
                all_chb[z].checked=false;
            }
        }            
    })
}

It’s working.
But checked after second click.
How is it fixed ?