Saturday, 29 August 2020

How to enable scolling on nested ListView in Nativescript?

ListView scroll is working fine when only one ListView is there. If i create a nested ListView and try to scroll only parent ListView is scrolling. Please help me out to resolve this issue.

<ListView [items]="items">
    <ng-template let-item="item">
        <GridLayout class="list-view" rows="auto, *">
            <StackLayout row="0" class="list-view__content" (tap)="toggleAccordion(item)">
                <GridLayout columns="*, auto">
                    <FlexboxLayout col="0" alignItems="center">
                        <Label class="list-view__content__headline" [class.has-selected]="item.count > 0" textWrap="true" [text]="item.title"></Label>
                        <Label class="list-view__content__count" textWrap="true" *ngIf="item.count > 0" [text]="item.count"></Label>
                    </FlexboxLayout>
                    <StackLayout col="1">
                        <Image *ngIf="item.opened" src="font://&#xf077;" class="fas" width="15"></Image>
                        <Image *ngIf="!item.opened" src="font://&#xf078;" class="fas" width="15"></Image>
                    </StackLayout>
                </GridLayout>
            </StackLayout>
            <StackLayout row="1" *ngIf="item.values && item.values.length > 0 && item.opened">
                <ns-multi-select-search [data]="item (selectionChange)="onSelectionChange($event)"></ns-multi-select-search>
            </StackLayout>
        </GridLayout>
    </ng-template>
</ListView>

ns-multi-select-search component having nested ListView

<GridLayout rows="auto, 140" class="select">
    <StackLayout row="0">
        <SearchBar hint="Search here ..." (textChange)="onTextChanged($event)" (clear)="onClear($event)" (loaded)="onSearchBarLoaded($event)"></SearchBar>
    </StackLayout>
    <StackLayout row="1" class="select__content" *ngIf="(allItems && allItems.length > 0)">
        <ListView [items]="allItems">
            <ng-template let-item="item">
                <GridLayout columns="*, auto" (tap)="toggleSelected(item)" class="select__content__list">
                    <StackLayout col="0">
                        <Label class="select__content__list__label" [text]="item.name" textWrap="true"></Label>
                    </StackLayout>
                    <StackLayout col="1">
                        <Image *ngIf="item.checked" src="~/assets/images/checked-check-box.png" width="20" class="m-t-5"></Image>
                        <Image *ngIf="!item.checked" src="~/assets/images/default-check-box.png" width="20" class="m-t-5"></Image>
                    </StackLayout>
                </GridLayout>
            </ng-template>
        </ListView>
    </StackLayout>
    <FlexboxLayout row="1" *ngIf="(allItems && allItems.length === 0)" flexDirection="column" alignItems="center" justifyContent="center" class="select__content flex-error">
        <Label class="message" text="No match found!"></Label>
    </FlexboxLayout>
</GridLayout>


from How to enable scolling on nested ListView in Nativescript?

No comments:

Post a Comment