This is a migrated thread and some comments may be shown as answers.

Listview for angular2

12 Answers 129 Views

ListView

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

12 Answers, 1 is accepted

answered on 15 Nov 2016, 09:17 AM

Hi,
Thank you for your interest in UI for NativeScript.
I reviewed your problem and test the given while using RadListView with its Swipe to Execute functionality. In my sample I was unable to reproduce this strange while navigating to a Page with ListView.
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 if it is NativeScript Angular 2 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

answered on 16 Nov 2016, 09:18 AM

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

answered on 16 Nov 2016, 01:20 PM

Hello,
Thank you for writing us back.

I tried to use your code snippets to recreate your behavior, but there are some missing resources , which prevent me from debugging your code. Nevertheless, I reuse some part of the given code and create 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

Accepted

answered on 18 Nov 2016, 01:00 PM

Hello,
Thank you for writing us back.

In my sample project has been shown, how to disable left Swipe in the RadListView. However your request, I extended the demo and include sample functionality, which demonstrated one simple way to remove 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

answered on 25 Nov 2016, 02:13 AM

annual-report.png

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;
}

Accepted

answered on 28 Nov 2016, 07:06 AM

Swipe-to-delete---android.gif

Hi,

I reviewed the sample project and everything seems to work as expected for Android as well as for iOS. For your I am attaching gif file, which 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 of the RadListView.

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

Regards,
nikolay.tsonev
Telerik by Progress

answered on 04 Mar 2017, 06:34 AM

delete.png

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.

answered on 05 Mar 2017, 07:39 AM

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:

Can you help me, thanks!

Accepted

answered on 06 Mar 2017, 09:34 AM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Listview for angular2

12 Answers, 1 is accepted