[Solved] Listview (angular) swipe action panel covers list items

[K. O.]

I am using Radlistview (1.6.1)  - angular - and trying to use the swipe action. When the list is loaded, the swipe action panel covers the list items, which I presume should be hidden before a swipe gesture is made.

See the sample code below and the output:

html;

<GridLayout>
    <RadListView [items]="myItems" swipeActions="true">
        <template tkListItemTemplate let-item="item" let-i="index" let-odd="odd" let-even="even">
            <StackLayout [class.odd]="odd" [class.even]="even" orientation="vertical">
                <Label [text]='"index: " + i'></Label>
                <Label [text]='"[" + item.id +"] " + item.name'></Label>
            </StackLayout>
        </template>
        <GridLayout *tkListItemSwipeTemplate columns="auto,*, auto" class="gridLayoutLayout" backgroundColor="Green">
            <StackLayout id="mark-view" col="0" class="markViewStackLayout" (tap)="onLeftSwipeClick($event)">
                <Label text="mark" class="swipetemplateLabel" verticalAlignment="center" horizontalAlignment="center"></Label>
            </StackLayout>
            <StackLayout id="delete-view" col="2" class="deleteViewStackLayout" (tap)="onRightSwipeClick($event)">
                <Label text="delete" class="swipetemplateLabel" verticalAlignment="center" horizontalAlignment="center"></Label>
            </StackLayout>
        </GridLayout>
        <!--<ListViewGridLayout tkListViewLayout scrollDirection="Vertical" itemHeight="100" spanCount="3"> </ListViewGridLayout>-->
    </RadListView>
</GridLayout>

 

ts file

import { Component, ChangeDetectionStrategy } from "@angular/core";

@Component({
    selector: "ns-test-page",
    moduleId: module.id,
    templateUrl: "./test.html"
})
export class TestPage {
    public myItems: Array<DataItem>;
    private counter: number;

    constructor() {
        this.myItems = [];
        this.counter = 0;
        for (var i = 0; i < 50; i++) {
            this.myItems.push(new DataItem(i, "data item " + i));
            this.counter = i;
        }
    }
}
class DataItem {
    constructor(public id: number, public name: string) { }
}

 

Am I doing something wrong or there is a bug with your angular directives that needs to be solved.

Thanks

[Nick Iliev]

Hello K.O. Frimpong,

After some research of your issue, it appears that the cause for this behavior is the lack of set background-color for the container of tkListItemTemplate.  I have logged this one as a bug here where you can track its development.
Meanwhile, as a workaround, you can set a background color for your container via CSS class or with inline declaration in your HTML layout 
e.g.

<template tkListItemTemplate let-item="item" let-i="index" let-odd="odd" let-even="even">
    <StackLayout [class.odd]="odd" [class.even]="even" orientation="vertical" backgroundColor="white">
        <Label [text]='"index: " + i'></Label>
        <Label [text]='"[" + item.id +"] " + item.name'></Label>
    </StackLayout>
</template>

Notice the backgroundColor for our stack layout.

Or via your CSS classes.
e.g.

.odd {
    background-color: white;
}

.even {
    background-color: white;
}

With one of the solutions above the result will be as expected and your swipe action layouts will be hidden by default.

Regards,
Nikolay Iliev
Telerik by Progress