CODEWITHSUNDEEP
angulartypescriptnativescriptangular2-nativescript
Stephen
Stephen

Reputation: 10079

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

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.

Upvotes: 10

Views: 909

Answers (2)

Stephen
Stephen

Reputation: 10079

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>

Upvotes: 1

Dlucidone
Dlucidone

Reputation: 1101

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

Upvotes: 2

Related Questions