Listview (angular) swipe action panel covers list items

Thread is closed for posting
2 posts, 0 answers
  1. K. O.
    K. O. avatar
    1 posts
    Member since:
    Mar 2017

    Posted 11 Mar 2017 Link to this post

    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

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 13 Mar 2017 Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top