Using collapse in listview items not removing the space for particular item view entirely

Question

• In listview items I'm using Visiblity concept in layout to perform visible and collapse. When performing Collapse, listview items not removing that view entirely from the layout.

• It is removing the item contents such as name and id but placing blank white view at that particular listitem position in listview.

• Below I have shared the codes for better understanding:

StudentData.ts :

export class StudentData {

constructor(public id: number, public name: string, public collapseData: boolean) {}

} 

student.page.html:

 <ListView id="listId" [items]="allFeedItems" class="list-group" height="300">
        <ng-template let-item="item">
            <StackLayout [visibility]="item.collapseData ? 'visible' : 'collapse'" >

                <StackLayout orientation="horizontal">
                <Label class="item-address" text="address"></Label>
            </StackLayout>
                .....

            </StackLayout>
        </ng-template>
    </ListView>        

What is happening:

For eg: in modal class, I'm saving switch control values for listitems in hashmap. when coming back to my main page (i.e)StudentPage, I need to hide the particular row item entirely. But it is removing only the contents name and id. It's not removing the blank view for that particular listview item position.

What I'm expecting :

To remove the blank view for that particular item position in listview.

Answer 1

You should Use different templates for that -

<ListView [items]="items" [itemTemplateSelector]="templateSelector">
<template nsTemplateKey="big" let-item="item">
<!-- big item template -->
</template>
<template nsTemplateKey="small" let-item="item">
<!-- small item with image -->
</template>
<template nsTemplateKey="small-no-image" let-item="item">
<!-- small item with no image -->
</template>
</ListView>

and TS code -

public templateSelector(item: NewsItem, index: number, items: 
NewsItem[]) {
if (item.type === "big") {
return "big"
} 

if (item.type === "small" && item.imageUrl) {
return "small";
}
if (item.type === "small" && item.imageUrl) {
return "small-no-image";
}

throw new Error("Unrecognized template!")
}

for more Info Read Here - https://medium.com/@alexander.vakrilov/faster-nativescript-listview-with-multiple-item-templates-8f903a32e48f

Answer 2

as mentioned in the comment by dashman. I have added the visibility inside the child stacklayout instead of parent stacklayout. Then it doesn't took the blank white space for the particular listitem.

<ng-template let-item="item">
  <StackLayout>

    <StackLayout [visibility]="item.collapseData ? 'visible' : 'collapse'" orientation="horizontal">
      <Label class="item-address" text="address"></Label>
    </StackLayout>
    .....

  </StackLayout>
</ng-template>