Not all items in RadListView can delete

4 posts, 0 answers
  1. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 09 Jan Link to this post

    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>

     

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    222 posts

    Posted 11 Jan Link to this post

    Hi,

    Thank you interest in UI for NativeScirpt.
    I tried to recreate your problem, unfortunately there are some missing resources, which prevent me from debugging your code. Nevertheless, I reuse some parts from your code and create sample, where all items from the RadListView has been removed properly. For your convenience 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
    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.
  3. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 11 Jan in reply to nikolay.tsonev Link to this post

    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?

     

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    222 posts

    Posted 13 Jan Link to this post

    Hello,

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

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

    For further help you could review the below-given 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
    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