Not all items in RadListView can delete

[License]

Hello,

The requirement is as follows: just as the file attached below, the black item can't delete, while the green item can delete. I try to achieve it by the code below:

But the last two templates don't seem to work. Can you help me ?

<GridLayout rows="auto,*" columns="*" dock="right" backgroundColor="#ffffff">
                <StackLayout row="0" col="0">
                    <Button class="btn btn-primary addButton" text="新增子类别" (tap)="displayInput()"></Button>
                </StackLayout>
                <RadListView class="list-group" row="1" id="listView" [items]="detailList" itemSwipe="true" (itemSwipeProgressChanged)="onItemSwipeProgressStarted($event)"
                    (itemSwipeProgressEnded)="onSwipeCellFinished($event)">
                    <template tkListItemTemplate class="list-detail" let-item="item">
                        <StackLayout class="list-group-item">
                            <GridLayout columns="*" rows="auto" (tap)="onItemTap(item)" width="60%">
                                <Label *ngIf="!item.isInit" class="m-l-30 h4 list-group-item-text-primary text-left" [text]="item.name"></Label>
                                <Label *ngIf="item.isInit" class="m-l-30 h4 list-group-item-text text-left" [text]="item.name"></Label>
                            </GridLayout>
                            <StackLayout class="m-t-20" height="1" backgroundColor="#F7F7F7"></StackLayout>
                        </StackLayout>
                    </template>
                 
                    <template ngFor let-item [ngForOf]="detailList">
                        <template [ngIf]="!item.isInit">
                        <GridLayout *tkListItemSwipeTemplate columns=" *, auto" class="listItemLeftSwipeGridLayout" (tap)="onRightSwipeClick($event)">
                            <GridLayout *ngIf="!item.isInit" id="delete-view" class="deleteViewStackLayout" col="1">
                                <Label [text]="'fa-trash' | fonticon" class="fa"></Label>
                            </GridLayout>
                        </GridLayout>
                        </template>
                       </template>
                </RadListView>
            </GridLayout>

 

[Nikolay Tsonev]

Hi,

Thank you interest in UI for NativeScirpt.
I tried to recreate your problem, there are some missing resources, which prevent me from debugging your code. Nevertheless, I reuse some parts from your code and create , where all items from the RadListView has been removed properly. For your I am attaching sample code. 

app.component.html

<GridLayout rows="auto,*" columns="*" dock="right" backgroundColor="#ffffff">
    <StackLayout row="0" col="0">
        <Button class="btn btn-primary addButton" text="新增子类别" (tap)="displayInput()"></Button>
    </StackLayout>
    <RadListView class="list-group" row="1" id="listView" [items]="detailList" itemSwipe="true" (itemSwipeProgressChanged)="onItemSwipeProgressStarted($event)"
        (itemSwipeProgressEnded)="onSwipeCellFinished($event)">
        <template tkListItemTemplate class="list-detail" let-item="item">
            <StackLayout class="list-group-item">
                <GridLayout columns="*" rows="auto" width="60%">
                    <Label *ngIf="!item.isInit" class="m-l-30 h4 list-group-item-text-primary text-left" [text]="item.name"></Label>
                    <Label *ngIf="item.isInit" class="m-l-30 h4 list-group-item-text text-left" [text]="item.name"></Label>
                </GridLayout>
                <StackLayout class="m-t-20" height="1" backgroundColor="#F7F7F7"></StackLayout>
            </StackLayout>
        </template>


        <GridLayout *tkListItemSwipeTemplate columns=" *, auto" class="listItemLeftSwipeGridLayout">
            <GridLayout  id="delete-view" class="deleteViewStackLayout" col="1">
                <Label text="delete" class="fa"></Label>
            </GridLayout>
        </GridLayout>
    </RadListView>
</GridLayout>

app.component.ts

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

import {ListViewEventData} from "nativescript-telerik-ui/listview"

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public detailList=[];

    constructor(){
        for(var i=0; i<10; i++){
            this.detailList.push({name:"name"+i, detailList:[{isInit:true}]});
        }
    }

    public onItemSwipeProgressStarted(args){

    }

    public onSwipeCellFinished(args: ListViewEventData) {
        if (args.data.x < -200) {
            console.log("Perform right action");
            console.log(args.itemIndex);
            var index=args.itemIndex
             var array=this.detailList;
             this.detailList=[]
            for(var i=0; i<array.length; i++){
                if(i != index){
                    this.detailList.push(array[i])
                }

            }
            this.detailList.forEach(function(element){
                console.log(element.name);
            })
        }


    }
}

Let me know whether this helps. If you still experience problems please send me the missing resources, code, which you use for removing the items from the ListView and the mock data, which you are using for loading the data in the ListView.
Regards,
nikolay.tsonev
Telerik by Progress

[License]

Hello,

I'm sorry I didn't make it clear. What I mean is  I want some of them can delete but others can't . For now ,if I set like you,

<GridLayout *tkListItemSwipeTemplate columns=" *, auto"class="listItemLeftSwipeGridLayout">
            <GridLayout  id="delete-view" class="deleteViewStackLayout" col="1">
                <Label text="delete" class="fa"></Label>
            </GridLayout>
        </GridLayout>

Then all the list can delete . I try to hide some items 'the delete method by *ngIf (just like my first question above) ,but it doesn't work. What can I do?

 

[Nikolay Tsonev]

Hello,

For this you should use itemSwipeProgressChanged and itemSwipeProgressEnded events, which will help you to verify, whether the item could be deleted or not. 

On you could check, whether the item could be deleted. If the not be removed, you should set the ListView itemSwipe property to false reset it on itemSwipeProgressEnded. 

For further you could review the example.


app.component.html

<GridLayout rows="auto,*" columns="*" dock="right" backgroundColor="#ffffff">
    <StackLayout row="0" col="0">
        <Button class="btn btn-primary addButton" text="新增子类别" (tap)="displayInput()"></Button>
    </StackLayout>
    <RadListView class="list-group" row="1" id="listView" [items]="detailList" [itemSwipe]="itemswipe" (itemTap)="onitemclick($event)" (itemSwipeProgressChanged)="onItemSwipeProgressStarted($event)"
        (itemSwipeProgressEnded)="onSwipeCellFinished($event)">
        <template tkListItemTemplate class="list-detail" let-item="item">
            <StackLayout class="list-group-item">
                <GridLayout columns="*" rows="auto" width="60%">
                    <Label *ngIf="!item.isInit" class="m-l-30 h4 list-group-item-text-primary text-left" [text]="item.name"></Label>
                    <Label *ngIf="item.isInit" class="m-l-30 h4 list-group-item-text text-left" [text]="item.name"></Label>
                </GridLayout>
                <StackLayout class="m-t-20" height="1" backgroundColor="#F7F7F7"></StackLayout>
            </StackLayout>
        </template>


        <GridLayout *tkListItemSwipeTemplate columns=" *, auto" class="listItemLeftSwipeGridLayout">
            <GridLayout  id="delete-view" class="deleteViewStackLayout" col="1">
                <Label text="delete" class="fa"></Label>
            </GridLayout>
        </GridLayout>
    </RadListView>
</GridLayout>

app.component.ts

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

import {ListViewEventData, RadListView} from "nativescript-telerik-ui/listview"

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public detailList=[];
    public itemswipe=true;

    constructor(){
        for(var i=0; i<10; i++){
            var tmpvar= true;
            if(i%2 == 0){
                tmpvar=false;
            }
            this.detailList.push({name:"name"+i, detailList:[{isInit:true}], canDelete:tmpvar});
        }
    }

    public onItemSwipeProgressStarted(args){
        var swipeLimits = args.data.swipeLimits;
        var itemboolenvalue=this.detailList[args.itemIndex].canDelete
        this.itemswipe=itemboolenvalue;

        swipeLimits.left=0;
        swipeLimits.right=100;
    }

    public onSwipeCellFinished(args: ListViewEventData) {
        if ((args.data.x < -80)&&(this.detailList[args.itemIndex].canDelete != false)) {
            console.log("Perform right action");

            var index=args.itemIndex
             var array=this.detailList;
             this.detailList=[]
            for(var i=0; i<array.length; i++){
                if(i != index){
                    this.detailList.push(array[i])
                }

            }
            this.detailList.forEach(function(element){
                console.log(element.name);
            })
        }
        else{
            this.itemswipe=true;
        }


    }
    onitemclick(args:ListViewEventData){

    }
}

Hope this information will help.

Regards,
nikolay.tsonev
Telerik by Progress