Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkbox after navigate back #121

Open
PabloPG opened this issue Jan 2, 2020 · 1 comment
Open

Checkbox after navigate back #121

PabloPG opened this issue Jan 2, 2020 · 1 comment

Comments

@PabloPG
Copy link

PabloPG commented Jan 2, 2020

When I tap on checkbox icon and going to the next page (navigate) and then navigate back, this checkbox always preserve the state, but, if i use a buttom to call .toggle() and going to the next page and back, the state not preserve.

<RadListView
        #myRadListView
	[items]="listaDeProdutos"
	selectionBehavior="Press"
	(itemSelected)="onItemSelected($event)"
	(itemDeselected)="onItemDeselected($event)"
	marginBottom="8"
>
    <ng-template let-produto="item" let-index="index">
        <StackLayout backgroundColor="white" orientation="Vertical">
            <FlexboxLayout class="m-t-10" [ngClass]="{'situacao-item-selected': produto.IsSelected}">
                <FlexboxLayout justifyContent="center" class="produto-dados" flexDirection="column">
                    <Label text]="getProdutoDescricao(produto)" textWrap="true"></Label>
                    <Label text="{{ 'Quantidade: ' + produto.QuantidadeEstoque }}"></Label>
                 </FlexboxLayout>

		<CheckBox
                     #elem
                     [checked]="produto.IsSelected"
                     class="checkbox"
                     (checkedChange)="
                         elem.checked !== produto.IsSelected &&
                             selecionarProduto(produto)
                      "
                      boxType="circle"
                  >
                 </CheckBox>
            </FlexboxLayout>
        </StackLayout>
    </ng-template>
</RadListView>
public onItemSelected(args: ListViewEventData) {
    let radio = this.listViewComponent.listView.getViewById("cb-" + args.index);
    const produto = this.listaDeProdutos.getItem(args.index);
    if (!produto.IsSelected) {
        console.dir(radio.nativeView.isChecked()); // Return false
	radio.nativeView.toggle();
	setTimeout(() => console.dir(radio.nativeView.isChecked()), 1000); // Retun true;
    }
}

Tap inside the checkbox have ripple effect:
https://media.giphy.com/media/H3pfYiz0XlbKqnImw3/giphy.gif

@wschroers
Copy link

wschroers commented Aug 20, 2020

Did you find a solution for this problem? I have a similar issue where the user can navigate back and forth between multiple views. First time the initial state of the checkbox or radiobutton is correct but after navigate back to a view the selection is gone.

Update: just found that binding a property to fillColor is the cause of my problem (fillColor="{{mainColor}}") When I set the color directly my problem is solved: (fillColor="#da291c")

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants