Listview for angular2

13 posts, 3 answers
  1. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 15 Nov 2016 Link to this post

    Hello,

     I meet a weird problem.When I first enter the page of RadListView,as I slide to the right the first time,It will appear a red block.Please look at the image below.

    As long as I slide to the left ,It disappears.But every time when I reenter the page ,It will appear once.I'm very confused.Can you help me?Thank you very much.

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    143 posts

    Posted 15 Nov 2016 Link to this post

    Hi,
    Thank you for your interest in UI for NativeScript.
    I reviewed your problem and test the given scenario, while using RadListView with its Swipe to Execute functionality. In my sample project I was unable to reproduce this strange behavior, while navigating to a Page with ListView.
    Unfortunately the given information is not enough to investigate further this problem. It would help if you could give us some more info about the problem or to send us sample project, which could be debugged locally. It will also help is you could give us info about the your project, if it is NativeScript Angular 2 project or you are using vanilla JavaScript.

    Sample code:

    XML
    <navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:lv="nativescript-telerik-ui-pro/listview" xmlns="http://www.nativescript.org/tns.xsd">
        <GridLayout orientation="vertical" rows="auto, *">
            <lv:RadListView
                id="listView"
                items="{{ dataItems }}"
                row="1"
                selectionBehavior="None"
                itemSwipeProgressEnded="onSwipeCellFinished"
                itemSwipeProgressChanged="onCellSwiping"
                itemSwipeProgressStarted="onSwipeCellStarted"
                itemSwipe="true">
                <lv:RadListView.listViewLayout>
                    <lv:ListViewLinearLayout scrollDirection="Vertical"/>
                </lv:RadListView.listViewLayout>
                <lv:RadListView.itemTemplate>
                    <StackLayout orientation="vertical" style="background-color: white;" paddingLeft="5">
                        <Label fontSize="20" text="{{ name }}" marginBottom="8"/>
                        <Label fontSize="14" text="{{ title }}" style="font-weight: bold;"/>
                        <Label fontSize="12" text="{{ text }}"/>
                    </StackLayout>
                </lv:RadListView.itemTemplate>
                <lv:RadListView.itemSwipeTemplate>
                    <GridLayout columns="auto, *, auto" backgroundColor="White">
                        <StackLayout id="mark-view" col="0" style="background-color: blue;" tap="onLeftSwipeClick" padding="16">
                            <Label text="mark" style="text-size: 20" verticalAlignment="center" horizontalAlignment="center"/>
                        </StackLayout>
                        <StackLayout id="delete-view" col="2" style="background-color: red;" tap="onRightSwipeClick" padding="16">
                            <Label text="delete" style="text-size: 20" verticalAlignment="center" horizontalAlignment="center"/>
                        </StackLayout>
                    </GridLayout>
                </lv:RadListView.itemSwipeTemplate>
            </lv:RadListView>
        </GridLayout>
    </navigation:ExamplePage>


    TypeScript
    import listViewModule = require("nativescript-telerik-ui-pro/listview");
    import viewModule = require('ui/core/view');
    import frameModule = require("ui/frame");
    import utilsModule = require("utils/utils");
    import {ObservableArray} from "data/observable-array"
     
    var json= {
       "names":[
                               "Joyce Dean",
                               
                                "Joel Robertson",
                                 
                                "Sherman Martin",
                                 
                                "Lela Richardson",
                                 
                                "Jackie Maldonado",
                                 
                                "Kathryn Byrd",
                                 
                                "Ervin Powers",
                                 
                                "Leland Warner",
                                 
                                "Nicholas Bowers",
                                 
                                "Alex Soto",
                                 
                                "Naomi Carson",
                                 
                                "Rufus Edwards",
                                 
                                "Ian Ellis",
                                 
                                "Pat Vasquez",
                                 
                                "Chelsea Burton",
                                
                                "Karl Bates",
                                
                                "Evan Rivera",
                                
                                "Tony Lawson",
                                
                                "Wallace Little",
                                 
                                "Carrie Tran",
                                 
                                "Tyler Washington"
                                 
          ],
        "titles":[
         "Sales report for January",
         "Planned network mainternance",
         "IT help desk",
         "Summaries of my interviews with customers",
         "REMINDER: corporate meeting",
         "Stock options",
         "Thank you!",
         "Meeting with Jack",
         "Please share these articles",
         "Additional information for Jack",
         "Miss you!",
         "Training",
         "Do you like this blog article?",
         "The latest UI design",
          "Need this article!",
          "Training update",
            "Safety instructions",
           "Missed our converstation",
           "Swift is awessome",
           "Missed conference call with Jack",
           "HR question"
          ],
     
          "text":[
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
          "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
          "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
          "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
          "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam",
          "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.",
          "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam",
          "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?",
          "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores",
          "Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda",
          "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates",
          "Quot decore facilisi ne duo. Quo an diceret explicari definitionem, ea quo modus fierent apeirian",
          "Ex dicta nonumy consetetur mei, cu mea dico iisque. Saperet officiis legendos at mel.",
          "Molestie officiis ut vis, at sea case sapientem. Nonumy primis percipit vim te, iusto commune quo ea.",
          "Ut quot rebum praesent nec, ius nobis nominavi sententiae id. Wisi facilisi perpetua ea eum, ut unum rationibus sadipscing est.",
          "Usu in veritus vulputate. Scribentur omittantur ne ius, sit eros percipit ocurreret ne.",
          "Per tollit dicunt utroque ut. Volutpat erroribus no duo, est in brute munere epicuri, ad cum justo commodo.",
          "Qui ex nulla assentior, ne cum minim intellegat suscipiantur. Quodsi oportere gubergren vel cu. Nec ei meis nonumy torquatos, eleifend salutandi",
          "Cibo quaeque est at, vel tritani maiorum apeirian ut. Et eos vulputate scribentur. An duis propriae voluptatibus vel, error iudico tamquam quo ne",
          "Dicat quaeque rationibus ei has, ne quis recteque cotidieque vis. Mutat accusam vim ex, sit an homero phaedrum partiendo. ",
          "Ad mea magna meliore, facete disputando id duo, ea sit elitr omittam interesset. Omnes fabulas signiferumque ad mel"
          ],
          "images":[
              "QUEEN",
              "FRANK",
              "ANTON",
              "LAMAI",
              "TOMSP",
              "FOLIG",
              "QUEDE",
              "LAZYK",
              "QUICK",
              "TRAIH",
              "LETSS",
              "RANCH",
              "BONAP",
              "FURIB",
              "BSBEV",
              "GODOS",
              "MAGAA",
              "RICSU",
              "WARTH",
              "WELLI",
              "CENTC"
          ]
    }
     
    export class DataItem {
        public name;
        public title;
        public text;
     
        constructor(name: string, title: string, text: string) {
            this.name = name;
            this.text = text;
            this.title = title;
        }
    }
     
     
    export function onPageLoaded(args) {
        var page = args.object;
        var array = new ObservableArray<DataItem>();
        for (var i = 0; i < json.names.length; i++) {
                array.push(new DataItem(json.names[i], json.titles[i], json.text[i]));
            }
        page.bindingContext = {dataItems:array};
    }
     
    export function onSwipeCellStarted(args: listViewModule.ListViewEventData) {
        var swipeLimits = args.data.swipeLimits;
        var listView = frameModule.topmost().currentPage.getViewById("listView");
        swipeLimits.threshold = listView.getMeasuredWidth();
        swipeLimits.left = listView.getMeasuredWidth();
        swipeLimits.right = listView.getMeasuredWidth();
    }
     
    // >> listview-swipe-stretch-view
    export function onCellSwiping(args: listViewModule.ListViewEventData) {
        var swipeLimits = args.data.swipeLimits;
        var currentItemView = args.object;
        var currentView;
        if (args.data.x >= 0) {
            currentView = currentItemView.getViewById("mark-view");
            var dimensions = viewModule.View.measureChild(
                currentView.parent,
                currentView,
                utilsModule.layout.makeMeasureSpec(args.data.x, utilsModule.layout.EXACTLY),
                utilsModule.layout.makeMeasureSpec(currentView.getMeasuredHeight(), utilsModule.layout.EXACTLY));
            viewModule.View.layoutChild(currentView.parent, currentView, 0, 0, dimensions.measuredWidth, dimensions.measuredHeight);
        } else {
            currentView = currentItemView.getViewById("delete-view");
            var dimensions = viewModule.View.measureChild(
                currentView.parent,
                currentView,
                utilsModule.layout.makeMeasureSpec(Math.abs(args.data.x), utilsModule.layout.EXACTLY),
                utilsModule.layout.makeMeasureSpec(currentView.getMeasuredHeight(), utilsModule.layout.EXACTLY));
            viewModule.View.layoutChild(currentView.parent, currentView, currentItemView.getMeasuredWidth() - dimensions.measuredWidth, 0, currentItemView.getMeasuredWidth(), dimensions.measuredHeight);
        }
     
        if (args.data.x > 200) {
            console.log("Notify perform left action");
        } else if (args.data.x < -200) {
            console.log("Notify perform right action");
        }
    }
    // << listview-swipe-stretch-view
     
    export function onSwipeCellFinished(args: listViewModule.ListViewEventData) {
        if (args.data.x < 0) {
            var currentItemView = args.object;
            var deleteView = currentItemView.getViewById("delete-view");
            var dimensions = viewModule.View.measureChild(
                deleteView.parent,
                deleteView,
                utilsModule.layout.makeMeasureSpec(Math.abs(args.data.x), utilsModule.layout.EXACTLY),
                utilsModule.layout.makeMeasureSpec(deleteView.getMeasuredHeight(), utilsModule.layout.EXACTLY));
            viewModule.View.layoutChild(deleteView.parent, deleteView, currentItemView.getMeasuredWidth(), 0, currentItemView.getMeasuredWidth(), dimensions.measuredHeight);
        }
         
        if (args.data.x > 200) {
            console.log("Perform left action");
        } else if (args.data.x < -200) {
            console.log("Perform right action");
        }
    }


    I look forward to hearing from you

    Regards,
    nikolay.tsonev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 16 Nov 2016 in reply to nikolay.tsonev Link to this post

    hello,

    Thank you .My project is NativeScript Angular 2 project.My code is  as follows.

    //contact.component.ts

    import {
        Component, ElementRef, ViewChild,
        Injectable, ChangeDetectorRef, AfterViewInit, OnDestroy
    } from '@angular/core';
    import { ObservableArray } from 'data/observable-array';
    import { Page } from 'ui/page';
    import { ListViewEventData, RadListView } from 'nativescript-telerik-ui-pro/listview';
    import { Router, ActivatedRoute, NavigationExtras } from '@angular/router';
    import { ContactApi } from '../../../api/accounting/api/ContactApi';
    import { ContactModel } from '../../../api/accounting/model/ContactModel';
    import { BaseComponent, ListViewRefreshType } from '../../shared';
    import * as frameModule from 'ui/frame';
    import { LoaderService } from '../../../service/core/loader';
    import * as applicationSettings from 'application-settings';
    import { Location } from '@angular/common';
    import { RouterExtensions } from 'nativescript-angular/router';

    @Component({
        selector: 'gpm-contact',
        templateUrl: './component/settings/contact/contact.component.html',
        styleUrls: ['./component/settings/contact/contact.component.css'],
        providers: [ContactApi]
    })
    export class ContactComponent extends BaseComponent implements AfterViewInit, OnDestroy {
        dataItems: ObservableArray<Object>;
        totalPage: number;
        currentPage: number;
        pageSize: number = 10;
        searchText: string = '';
        contact: ContactModel = {
            id: '',
            entityTypeCode: '',
            name: '',
            accountName: '',
            accountNumber: '',
            contactName: '',
            phoneNumber: '',
            email: ''
        };
        type: any;
        constructor(page: Page, loaderService: LoaderService, private contactApi: ContactApi,
            private router: Router, private routerExtensions: RouterExtensions, private location: Location, private actRoute: ActivatedRoute) {
            super(page, loaderService);
            this.type = actRoute.snapshot.params['type'];

        };

        public onLoadMoreItemsRequested(args: ListViewEventData) {
            let listView: RadListView = args.object;

            if (this.currentPage < this.totalPage) {
                this.getContactData(this.currentPage + 1)
                    .then(data => {
                        this.loadData(data);
                        args.returnValue = true;
                        listView.notifyLoadOnDemandFinished();
                    }, request => {
                        throw request;
                    }).catch(
                    request => {
                        listView.notifyLoadOnDemandFinished();
                        args.returnValue = false;
                        console.log(JSON.stringify(request._body));
                    }
                    );
            } else {
                args.returnValue = false;
            }
        }

        public onItemSwipeProgressStarted(args: ListViewEventData) {
            let swipeLimits = args.data.swipeLimits;
            let listView = frameModule.topmost().currentPage.getViewById('listView');

            swipeLimits.left = 0;
        }

        public onPullToRefreshInitiated(args: ListViewEventData) {
            let listView = args.object;
            this.enableLoader(false);
            this.getContactData(1).then(
                data => {
                    this.loadData(data);
                    listView.notifyPullToRefreshFinished();
                }, request => {
                    throw request;
                })
                .catch(
                request => {
                    listView.notifyPullToRefreshFinished();
                    console.log(JSON.stringify(request._body));
                }
                );
        }

        public onItemSelected(args: ListViewEventData) {
            console.log('item selected');
            console.log('get data:' + JSON.stringify(this.dataItems.getItem(args.itemIndex)));
            this.contact = this.dataItems.getItem(args.itemIndex);
        }

        public onSubmitSearch(searchText: string) {
            this.searchText = searchText;
            this.initData();
        }

        public onRightSwipeClick() {
            this.showOKCancelConfirm('删除提示', '您确定要删除该联系人吗?')
                .then(req => {
                    console.log('req:' + req);
                    if (req === true && this.contact.id) {
                        console.log('删除');
                        console.log('this.contact.id:' + this.contact.id);
                        try {
                            this.contactApi.contactDelete(this.contact.id)
                                .subscribe(
                                data => {
                                    this.showDialog('提示', '联系人删除成功', '好');
                                    this.initData();

                                },
                                error => {
                                    this.showError(error._body.errors[0]);
                                }
                                );
                        } catch (_error) {
                            this.showError(_error);
                        }
                    } else if (req === false) {
                        return;
                    } else {
                        this.showError('网络连接失败,请检查网络');
                    }
                });
        }

        public onClearSearch() {
            this.searchText = '';
            this.initData();
        }

        getContactData(pageIndex: number) {
            this.currentPage = pageIndex;
            return this.contactApi.contactSearch(this.searchText, String(pageIndex), String(this.pageSize))
                .debounceTime(1000)
                .distinctUntilChanged()
                .toPromise();
        }

        loadData(dataList: any) {
            console.log('执行loadData');
            if (dataList.list) {
                if (this.currentPage === 1) {
                    this.dataItems = new ObservableArray<Object>(dataList.list);
                } else {
                    this.dataItems.push(dataList.list);
                }
            } else {
                this.dataItems = new ObservableArray<Object>();
            }
            this.totalPage = dataList.pageCount;
        }

        initData() {
            console.log('执行ini');
            this.getContactData(1).then(
                data => {
                    this.loadData(data);
                }, request => {
                    throw request;
                })
                .catch(
                request => {
                    console.log(JSON.stringify(request._body));
                }
                );
        }

        ngAfterViewInit() {
            this.enableLoader(true);
            this.initData();
            this.enableLoader(false);
        }

        ngOnDestroy() {
            this.enableLoader(true);
        }
        goContactDetails(item) {
            let contact = item;
            console.log('onNavBtnTap type',this.type);
            if (this.type === 'Income' || this.type === 'Outcome') {
                console.log('this.transaction contact', contact.id);
                this.router.navigate(['/transaction-detail', { contact: JSON.stringify(contact), id: this.type }]);
            } else {
                this.router.navigate(['/contact/' + item.id + '']);

            }
        }

        onNavBtnTap() {
            if (this.type === 'Income' || this.type === 'Outcome') {
                this.routerExtensions.backToPreviousPage();
            } else {
                this.router.navigate(['/dashboard']);
            }

        }
        addWhich() {
            if (this.type === 'Income' || this.type === 'Outcome') {
                this.router.navigate(['/contact/id', { type: this.type }]);
            } else {
                this.router.navigate(['/contact/id']);
            }
        }
    }

    //contact.component.html

    <StackLayout>
        <!--<gpm-action-bar actionTitle="往来单位或联系个人" showNav="true"></gpm-action-bar>
        <ActionBarExtension>
          <ActionItem [nsRouterLink]="['/contact/id']" ios.position="right" android.position="right" >
            <Label [text]="'fa-plus' | fonticon" class="fa action-item-left-main" ></Label>
          </ActionItem>
        </ActionBarExtension>-->
        <ActionBar class="action-bar">
            <StackLayout orientation="horizontal" ios:horizontalAlignment="center" android:horizontalAlignment="center">
                <Label text="往来信息" class="action-title"></Label>
            </StackLayout>
            <NavigationButton icon="res://ic_back" ios:visibility="collapse"  (tap)="onNavBtnTap()"></NavigationButton>
            <ActionItem ios.position="left" android.position="left" android:visibility="collapse" (tap)="onNavBtnTap()">
                <Label android:visibility="false" class="fa  action-item-angle-main" [text]="'fa-angle-left' | fonticon"></Label>
            </ActionItem>
            <ActionItem (tap)="addWhich()" ios.position="right" android.position="right" >
            <Label [text]="'fa-plus' | fonticon" class="fa action-item-left-main" ></Label>
          </ActionItem>
        </ActionBar>
        <SearchBar #sb hint="搜索" (submit)="onSubmitSearch(sb.text)" (clear)="onClearSearch()"></SearchBar>
        <GridLayout>
            <RadListView id="listView" [items]="dataItems" pullToRefresh="true" itemSwipe="true"
            (pullToRefreshInitiated)="onPullToRefreshInitiated($event)"
            loadOnDemandMode="Auto" selectionBehavior="None"
            (itemSelected)="onItemSelected($event)"
            (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" (itemSwipeProgressChanged)="onItemSwipeProgressStarted($event)"
                class="list-group">
                <template tkListItemTemplate let-item="item">
                  <StackLayout orientation="vertical" class="list-group-item">
                      <GridLayout columns="*,120" rows="auto,*" (tap)="goContactDetails(item)">
                          <Label row="0" col="0" class="label  m-r-10" [text]="item.name"></Label>
                          <Label row="1" col="0" class="label footnote  m-r-10" [text]="item.contactName"></Label>
                          <Label row="0" col="1" rowSpan="2" class="numberLabel" [text]="item.phoneNumber"></Label>
                      </GridLayout>
                      <StackLayout class="hr-light m-t-10"></StackLayout>
                  </StackLayout>
                </template>
                <GridLayout *tkListItemSwipeTemplate columns="*,*, auto" class="listItemSwipeGridLayout" (tap)="onRightSwipeClick($event)">
                    <StackLayout id="delete-view" class="deleteViewStackLayout" col="2">
                        <Label [text]="'fa-trash' | fonticon" class="fa"></Label>
                    </StackLayout>
                </GridLayout>
            </RadListView>
        </GridLayout>
    </StackLayout>

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    143 posts

    Posted 16 Nov 2016 Link to this post

    Hello,
    Thank you for writing us back.

    I tried to use your code snippets to recreate your behavior, but unfortunately there are some missing resources , which prevent me from debugging your code. Nevertheless, I reuse some part of the given code and create sample project, where have been shown, how you could disable the left swipe while using RadListView. You could use onSwipeCellStarted event and when it has been fired to set swipeLimits.left to be equal to 0 . This should prevent from showing the red block on the left side of the ListView

    Could you review the sample project and to verify, whether this will resolve your problem.

    If you still experience problems please send me the dataItems structure and content  and the missing CSS file, which are use to style the ListView.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 18 Nov 2016 in reply to nikolay.tsonev Link to this post

    Thank you.It works,but I can't delete items.Can you try your demo?
  6. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    143 posts

    Posted 18 Nov 2016 Link to this post

    Hello,
    Thank you for writing us back.

    In my sample project has been shown, how to disable left Swipe in the RadListView. However regarding to your request, I extended the demo and include sample functionality, which demonstrated one simple way to remove element from the array and from the ListView. You could review the upgraded sample app here. when you slide from right to left, the item from the ListView should be removed.


    Hope this helps.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 24 Nov 2016 in reply to nikolay.tsonev Link to this post

    Hello,

    The missing things are as follows.The icon is fonticon.

    //annual-report.scss

    .label{
      color: #123456;
      padding-top: 5;
    }
    .img {
         padding-top: 10;
        height:20;
        width: 20;
    }
    .labelName{
      margin-top: 10px;
      margin-bottom: 5px;
    }
    .item {
       color:#2ECFC8;
        background-color: #fff;
        width: auto;
        height: auto;
        text-align: center;
        vertical-align: middle;
        border-width: 1;
        border-radius: 5;
        border-color: #F6F6F6;
        margin: 10 5 10 5;
    }
    .item-selected{
      color:#fff;
        background-color: #2ECFC8;
        width: auto;
        height: auto;
        text-align: center;
        vertical-align: middle;
        border-width: 1;
        border-radius: 5;
        border-color: #F6F6F6;
        margin: 10 5 10 5;
    }
    .icon{
          font-size: 25;

    }
    .icon-income{
      color:#92E7C4;
    }
    .icon-expense{
      color:#F478B7;
    }
    .icon-balance{
      color:#8278F3;
    }
    .icon-totalbalance{
      color:#CA68FF;
    }
    .vr-center{
      width: auto;
        height: auto;
      vertical-align: middle;
    }

     

  8. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    143 posts

    Posted 25 Nov 2016 Link to this post

    Hello,
    Thank you for writing us back.

    Fix for your problem, you could find here in this forum answer.


    Hope this helps 
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 27 Nov 2016 in reply to nikolay.tsonev Link to this post

    Thank you so much, the project you gave above resolved the problem on IOS.But how can I slide from right to left to delete items on android? The project you gave can't delete items on android.
  10. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    143 posts

    Posted 28 Nov 2016 Link to this post

    Hi,

    I reviewed the sample project and everything seems to work as expected for Android as well as for iOS. For your convenience I am attaching gif file, which show that swipe from right to left will remove the item. Could you verify the sample app again and to confirm if you still have problems with Swipe to execute functionality of the RadListView


    Let me know whether this helps or if I could assist you further.

    Regards,
    nikolay.tsonev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 04 Mar in reply to nikolay.tsonev Link to this post

    Hello, 

    Thanks for your Swipe-to-delete--android.gif, don't you find that you can only swipe at top or bottom of the content, you can't  swipe on the content. It seems not to be a good user experience. But IOS is good. Do you have an idea to optimize that ?I have a  file attached, which shows that you can't swipe the red area to delete item.

  12. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 05 Mar in reply to License Link to this post

    Hello,

    I have something more to add . I finally  know why I can't I delete item on android .In your project above(https://github.com/tsonevn/NGSwipeRadListView) , It all works well for android but if I add a (tap) function (in order to navigate to detail page to edit) in <template> <StackLayout>, the android can't swipe from right to delete item , but  IOS works well .The code just like this:

     <template tkListItemTemplate let-item="item">
                <StackLayout orientation="vertical" class="list" (tap)="goContactDetails(item)" >
                    <GridLayout columns="*,120" rows="auto,*">
                        <Label width="90%" row="0" col="0" class="m-b-10"  [text]="item.name"></Label>
                        <Label width="90%" row="1" col="0"  [text]="item.name"></Label>
                        <Label width="100%" row="0" col="1" rowSpan="2" class="numberLabel" [text]="item.description"></Label>
                    </GridLayout>
                    <StackLayout height="8" width="100%" marginTop="15" backgroundColor="#ff0000"></StackLayout>
                </StackLayout>
            </template>

    Can you help me, thanks!

  13. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    143 posts

    Posted 06 Mar Link to this post

    Hello License,

    In order to be able to use delete functionality and navigation to the details page, while you select some of the ListView items, you should use RadListView itemTap event, instead of setting tap event for the main container of the  ListView template. For example:

    HTML
    <RadListView row="1" id="listView" itemTap [items]="dataItems" pullToRefresh="true" itemSwipe="true" (itemSwipeProgressStarted)="onSwipeCellStarted($event)"
           loadOnDemandMode="Auto" (itemSwipeProgressEnded)="onSwipeCellFinished($event)" selectionBehavior="None" (itemTap)="onItemTap($event)"
               class="list-group">
               <template tkListItemTemplate let-item="item">
               <StackLayout orientation="vertical" class="list" >
                   <GridLayout columns="*,120" rows="auto,*">
                       <Label width="90%" row="0" col="0" class="m-b-10"  [text]="item.name"></Label>
                       <Label width="90%" row="1" col="0"  [text]="item.name"></Label>
                       <Label width="100%" row="0" col="1" rowSpan="2" class="numberLabel" [text]="item.description"></Label>
                   </GridLayout>
                   <StackLayout height="8" width="100%" marginTop="15" backgroundColor="#ff0000"></StackLayout>
               </StackLayout>
           </template>
               <GridLayout *tkListItemSwipeTemplate columns="*, auto" class="listItemSwipeGridLayout" (tap)="onRightSwipeClick($event)">
                   <StackLayout id="delete-view" class="deleteViewStackLayout" col="1" (tap)="onRightSwipeClick($event)">
                       <Label text="delete" class="fa"></Label>
                   </StackLayout>
               </GridLayout>
           </RadListView>

    TypeScript
    public onItemTap(args){
            console.log("sample tap");
            console.log( args.itemIndex)
        }

    This should be applicable for both Android and iOS.

    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