Collapsible list with NativeScript doesn't work good

Question

I follow this link to create collapsible list with Nativescript.

I have this html code:

       <RadListView [items]="evgpsbyclientid0" [itemTemplateSelector]="templateSelector" class="list-group"
            (itemTap)="onItemTap($event)" >
            <ng-template tkListItemTemplate let-item="item">
                <GridLayout rows="auto,auto" columns="6*,*" class="add-dropdown" style="position:fixed">
                    <Label [text]="item.device_serial" class="list-group-item" col="0"></Label>
                    <Image src="~/assets/images/dropdown.png" width="30" height="30" col="1"></Image>
                </GridLayout>
            </ng-template>
            <ng-template tkTemplateKey="expanded" let-item="item">
                <GridLayout rows="auto,auto" columns="80*,auto" class="add-dropdown" style="position:fixed">
                    <Label [text]="item.device_serial" class="list-group-item" col="0"></Label>
                    <Image row="0" col="1" src="~/assets/images/dropup.png" width="30" height="30"></Image>
                    <StackLayout>
                        <Label [text]='"Data: " + item.datetime_device' class="show-answer"></Label>
                        <hr>
                        <Label [text]='"Desc: " + item.alarmdesc' class="show-answer"></Label>
                        <hr>
                        <Label [text]='"Seriali: " + item.device_serial' class="show-answer"></Label>
                        <hr>
                        <Label [text]='"Data Acted: " + item.dtm_acted' class="show-answer"></Label>
                        <hr>
                    </StackLayout>
                </GridLayout>
            </ng-template>
        </RadListView> 

and this code in typescript

 import { isAndroid } from "platform";
 import { ListViewEventData } from "nativescript-ui-listview";

 public ngOnInit() {
    this.eventsgps.mobile_eventgetbyclientidActed0().subscribe(
            evgpsbyclientid0 => {
                this.evgpsbyclientid0 = evgpsbyclientid0;
            }
        );
    }

    templateSelector(item: any, index: number, items: any): string {
        return item.expanded ? "expanded" : "default";
      }

    onItemTap(event: ListViewEventData) {
        const listView = event.object,
            rowIndex = event.index,
            dataItem = event.view.bindingContext;

        dataItem.expanded = !dataItem.expanded;
        if (isAndroid) {
            listView.androidListView.getAdapter().notifyItemChanged(rowIndex);
        }
      }

The problem is like in image. So in first image I show only [text]="item.device_serial" and in second image I want to show in bottom other details. In image, my details show behind the text.

image1 image2

Thank you!

Answer 1

The problem seems to be your layout, you have 2 rows defined in GridLayout but you have never assigned what should appear in in row index 1. Therefore all components will overlap in row index 0.

Also I'm unsure what is hr in your code, guessing it's your custom component.

Update:

The expanded template should be something like,

        <ng-template tkTemplateKey="expanded" let-item="item">
            <GridLayout rows="auto,auto" columns="80*,auto" class="add-dropdown" style="position:fixed">
                <Label [text]="item.device_serial" class="list-group-item" col="0"></Label>
                <Image row="0" col="1" src="~/assets/images/dropup.png" width="30" height="30"></Image>
                <StackLayout row="1">
                    <Label [text]='"Data: " + item.datetime_device' class="show-answer"></Label>
                    <hr>
                    <Label [text]='"Desc: " + item.alarmdesc' class="show-answer"></Label>
                    <hr>
                    <Label [text]='"Seriali: " + item.device_serial' class="show-answer"></Label>
                    <hr>
                    <Label [text]='"Data Acted: " + item.dtm_acted' class="show-answer"></Label>
                    <hr>
                </StackLayout>
            </GridLayout>
        </ng-template>