hello,
How can I get the RadListView element by @ViewChild inside RadSideDrawer ( let listView: RadListView = this.listViewElement.nativeElement;)?
I have tried,but listview is empty.
if (listView) {
listView.refresh();
console.log('auto set==');
listView.loadOnDemandMode = "Auto";
listView.loadOnDemandMode = "Manual";
} else {
console.log('sdfdsf');
}
Can you help me?
4 Answers, 1 is accepted
Thank you for your interest in UI for NativeScript.
To access the RadListView reference via code behind, you could use the `page` instance access to while using method on ngAfterViewInit. For your I am attaching sample code , where has been shown, how to get the ListView in NativeScript Angular 2 project .
HTML
<
GridLayout
rows
=
"100 *"
columns
=
""
>
<
StackLayout
row
=
"0"
>
<
Label
text
=
"Second component"
class
=
"title"
></
Label
>
<
Button
text
=
"GO TO FIRST"
[nsRouterLink]="['/first']"
class
=
"link"
></
Button
>
</
StackLayout
>
<
RadListView
row
=
"1"
id
=
"listView"
[items]="dataItems"
pullToRefresh
=
"true"
itemSwipe
=
"true"
(itemSwipeProgressStarted)="onSwipeCellStarted($event)"
loadOnDemandMode
=
"Auto"
(itemSwipeProgressEnded)="onSwipeCellFinished($event)"
selectionBehavior
=
"None"
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.name"></
Label
>
<
Label
row
=
"0"
col
=
"1"
rowSpan
=
"2"
class
=
"numberLabel"
[text]="item.description"></
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
=
"1"
(tap)="onRightSwipeClick($event)">
<
Label
text
=
"delete"
class
=
"fa"
></
Label
>
</
StackLayout
>
</
GridLayout
>
</
RadListView
>
</
GridLayout
>
TypeScript
import { Component,ElementRef, ViewChild, } from "@angular/core";
import {Page} from "ui/page";
import {ListViewEventData, RadListView} from "nativescript-telerik-ui/listview";
var frameModule = require("ui/frame");
import {ObservableArray} from "data/observable-array";
@Component({
selector: "second",
templateUrl:"second.component.html"
})
export class SecondComponent {
public dataItems;
public listviewitems=[];
public listview:RadListView;
constructor(private page:Page){
this.dataItems =[
{ "id": 1, "name": "Item 1", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 2, "name": "Item 2", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 3, "name": "Item 3", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 4, "name": "Item 4", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 5, "name": "Item 5", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 6, "name": "Item 6", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 7, "name": "Item 7", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 8, "name": "Item 8", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 9, "name": "Item 9", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 10, "name": "Item 10", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image" , "selected": false}];
for(var i=0; i<
this.dataItems.lenght
; i++){
this.listviewitems.push(this.dataItems[i]);
}
}
public onRightSwipeClick() {
console.log("remove")
}
ngAfterViewInit(){
let listview:RadListView =<RadListView> this.page.getViewById("listView");
console.log(listview.items.length);
}
public onSwipeCellStarted(args: ListViewEventData) {
var swipeLimits = args.data.swipeLimits;
var listView = frameModule.topmost().currentPage.getViewById("listView");
swipeLimits.threshold = listView.getMeasuredWidth();
swipeLimits.left = 0;
swipeLimits.right = listView.getMeasuredWidth();
}
public onSwipeCellFinished(args: ListViewEventData) {
var listview:RadListView=<
RadListView
> this.page.getViewById("listView");
this.listviewitems=[];
if (args.data.x < -200) {
console.log("Perform right action");
console.log(args.itemIndex);
this.dataItems= this.remove(args.itemIndex, this.dataItems);
listview.refresh();
}
}
remove(index, array){
var tmpArray = [];
for(var i=0; i<array.length; i++){
if(index == i){
console.log("do not include")
}
else{
tmpArray.push(array[i]);
}
}
return tmpArray;
};
}
Let me know, whether this helps or if I could assist you further.
Regards,
nikolay.tsonev
Telerik by Progress
Thank you,
But my code is in the RadSideDrawer,the code is follows: Can you check the code in RadSideDrawer?
//transaction.component.html
<RadSideDrawer drawerLocation="right">
<StackLayout tkDrawerContent>
<DockLayout class="sideDrawerContent" stretchLastChild="true">
<GridLayout rows="1,*" columns="*,*" dock="bottom" orientation="horizontal" class="confirmSection">
<StackLayout class="hr-light" row="0" col="0" colSpan="2"></StackLayout>
<StackLayout row="1" col="0" class="cancel">
<Label text="取消" class="label" (tap)="closeDrawer()"></Label>
</StackLayout>
<StackLayout row="1" col="1" class="confirm">
<Label text="确定" class="label" (tap)="search()"></Label>
</StackLayout>
</GridLayout>
<StackLayout dock="top" class="filterSection">
<StackLayout>
<Label text="交易日期" class="label"></Label>
<GridLayout rows="auto" columns="*,10,*" class="datePicker">
<StackLayout row="0" col="0">
<gpm-datepicker-dialog class="text-center btn-small btn-secondary" hint="开始日期" [(ngModel)]="searchModel.startDate" (onSelectedDateChange)="onFilterStartDateChange($event)"></gpm-datepicker-dialog>
</StackLayout>
<Label text="-" row="0" col="1" class="separator"></Label>
<StackLayout row="0" col="2">
<gpm-datepicker-dialog class="text-center btn-small btn-secondary" hint="结束日期" [(ngModel)]="searchModel.endDate" (onSelectedDateChange)="onFilterEndDateChange($event)"></gpm-datepicker-dialog>
</StackLayout>
</GridLayout>
</StackLayout>
<StackLayout>
<Label text="交易账户" class="input m-b-10"></Label>
<GridLayout>
<RadListView [items]="accountArrays" (itemTap)="onItemTap($event)" class="selector-list-group">
<template tkListItemTemplate let-item="item" class="m-t-20">
<GridLayout>
<Label [class]="item.isSelected ? 'h3 square-list-selected filter-margin':'h3 square-list-normal filter-margin'" text="{{item.accountName}}"></Label>
</GridLayout>
</template>
<ListViewGridLayout tkListViewLayout spanCount="2"></ListViewGridLayout>
</RadListView>
</GridLayout>
</StackLayout>
</StackLayout>
</DockLayout>
</StackLayout>
<StackLayout tkMainContent backgroundColor="#F2F2F2">
<gpm-action-bar actionTitle="收支记录" showNav="true" useCustomTap="true" (onNavTap)="onNavBtnTap()"></gpm-action-bar>
<ActionBarExtension>
<ActionItem ios.position="right" android.position="right" (tap)="onOpenFilterDrawer()">
<Label [text]="'fa-filter' | fonticon" class="fa action-item-left-main"></Label>
</ActionItem>
</ActionBarExtension>
<StackLayout backgroundColor="#F2F2F2">
<SegmentedBar #sb [items]="segmentedItems" [selectedIndex]="selectedIndex" borderColor="#1CCFC9" selectedBackgroundColor="#1CCFC9"
(selectedIndexChange)="onChange(sb.selectedIndex)" class="segmented-bar">
</SegmentedBar>
<GridLayout>
<RadListView id="listView" [items]="dataItems" pullToRefresh="true" itemSwipe="true" (pullToRefreshInitiated)="onPullToRefreshInitiated($event)"
loadOnDemandMode="Auto" selectionBehavior="None" (itemSelected)="onItemSelected($event)" (itemSwipeProgressChanged)="onItemSwipeProgressStarted($event)"
(loadMoreDataRequested)="onLoadMoreItemsRequested($event)" row="0" backgroundColor="#F2F2F2">
<template tkListItemTemplate let-item="item">
<StackLayout orientation="horizontal" class="list1-group-item">
<StackLayout *ngIf=" item.accountTransactionModel.entityType.name === '支出' " class="vr-line-left" backgroundColor="#FD8E77"></StackLayout>
<StackLayout *ngIf=" item.accountTransactionModel.entityType.name === '收入' " class="vr-line-left" backgroundColor="#408FF3"></StackLayout>
<StackLayout backgroundColor="#ffffff" orientation="horizontal" class="content" (tap)="goTransactionDetails(item)">
<StackLayout width="30%">
<Label class="h4 label transaction-date m-b-10" [text]="item.accountTransactionModel.accountTransDate| date: 'yyyy-MM-dd'"></Label>
<Label class="h3 label m-t-10 money text-right" [text]="item.amount| number:'.2-2'"></Label>
</StackLayout>
<StackLayout class="vr-light"></StackLayout>
<StackLayout>
<Label class="h3 m-b-10" [text]="item.businessCategory?item.businessCategory.name:''"></Label>
<Label class="h3 m-t-10" [text]="item.accountTransactionModel.bankAccount.name"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
</template>
<StackLayout class="list1-group-item">
<GridLayout *tkListItemSwipeTemplate columns="auto, *, auto" class="listItemSwipeGridLayout" (tap)="onRightSwipeClick($event)">
<StackLayout id="delete-view" class="deleteViewStackLayout" col="2">
<Label [text]="'fa-trash' | fonticon" class="fa"></Label>
</StackLayout>
</GridLayout>
</StackLayout>
</RadListView>
</GridLayout>
</StackLayout>
</StackLayout>
</RadSideDrawer>
Thank you for sharing your code.
You could use the same scenario with accessing the ListView while using when the RadListView is inside the SideDrawer. Due to some missing resources, I was unable to reuse your code, I am attaching sample code, where has been used RadSideDrawer and RadListView.
HTML
<
RadSideDrawer
drawerLocation
=
"right"
>
<
StackLayout
tkDrawerContent>
<
StackLayout
>
<
Label
text
=
"Title1"
textWrap
=
"true"
></
Label
>
<
Label
text
=
"Title2"
textWrap
=
"true"
></
Label
>
<
Label
text
=
"Title3"
textWrap
=
"true"
></
Label
>
<
Label
text
=
"Title4"
textWrap
=
"true"
></
Label
>
<
Label
text
=
"Title5"
textWrap
=
"true"
></
Label
>
<
Label
text
=
"Title6"
textWrap
=
"true"
></
Label
>
<
Label
text
=
"Title7"
textWrap
=
"true"
></
Label
>
<
Label
text
=
"Title8"
textWrap
=
"true"
></
Label
>
</
StackLayout
>
</
StackLayout
>
<
StackLayout
tkMainContent
backgroundColor
=
"#F2F2F2 "
>
<
GridLayout
>
<
RadListView
row
=
"1"
id
=
"listView"
[items]="dataItems"
pullToRefresh
=
"true"
itemSwipe
=
"true"
(itemSwipeProgressStarted)="onSwipeCellStarted($event)"
loadOnDemandMode
=
"Auto"
(itemSwipeProgressEnded)="onSwipeCellFinished($event)"
selectionBehavior
=
"None"
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.name"></
Label
>
<
Label
row
=
"0"
col
=
"1"
rowSpan
=
"2"
class
=
"numberLabel"
[text]="item.description"></
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
=
"1"
(tap)="onRightSwipeClick($event)">
<
Label
text
=
"delete"
class
=
"fa"
></
Label
>
</
StackLayout
>
</
GridLayout
>
</
RadListView
>
</
GridLayout
>
</
StackLayout
>
</
RadSideDrawer
>
import { Component,ElementRef, ViewChild, } from "@angular/core";
import {Page} from "ui/page";
import {ListViewEventData, RadListView} from "nativescript-telerik-ui/listview";
var frameModule = require("ui/frame");
import {ObservableArray} from "data/observable-array";
@Component({
selector: "second",
templateUrl:"second.component.html"
})
export class SecondComponent {
public dataItems;
public listviewitems=[];
public listview:RadListView;
constructor(private page:Page){
this.dataItems =[
{ "id": 1, "name": "Item 1", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 2, "name": "Item 2", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 3, "name": "Item 3", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 4, "name": "Item 4", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 5, "name": "Item 5", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 6, "name": "Item 6", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 7, "name": "Item 7", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 8, "name": "Item 8", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 9, "name": "Item 9", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image", "selected": false },
{ "id": 10, "name": "Item 10", "description":"This is item description.", "title": "This is item Title", "text": "This is item Text", "image": "This is item Image" , "selected": false}];
for(var i=0; i<
this.dataItems.lenght
; i++){
this.listviewitems.push(this.dataItems[i]);
}
}
public onRightSwipeClick() {
console.log("remove")
}
ngAfterViewInit(){
let listview:RadListView =<RadListView> this.page.getViewById("listView");
console.log(listview.items.length);
}
public onSwipeCellStarted(args: ListViewEventData) {
var swipeLimits = args.data.swipeLimits;
var listView = frameModule.topmost().currentPage.getViewById("listView");
swipeLimits.threshold = listView.getMeasuredWidth();
swipeLimits.left = 0;
swipeLimits.right = listView.getMeasuredWidth();
}
public onSwipeCellFinished(args: ListViewEventData) {
var listview:RadListView=<
RadListView
> this.page.getViewById("listView");
this.listviewitems=[];
if (args.data.x < -200) {
console.log("Perform right action");
console.log(args.itemIndex);
this.dataItems= this.remove(args.itemIndex, this.dataItems);
listview.refresh();
}
}
remove(index, array){
var tmpArray = [];
for(var i=0; i<array.length; i++){
if(index == i){
console.log("do not include")
}
else{
tmpArray.push(array[i]);
}
}
return tmpArray;
};
}
Let me know whether this helps. If you still experience problems please send me the missing resources: RadListView dataItem structure and --dialog custom component, which you have used in your code.
Regards,
nikolay.tsonev
Telerik by Progress
Thank you so much , it works !But I didn't use it on ngAfterViewInit(). Because on android when I change segmentedItems between SegmentedBar , that means I come back to the segmentedItem ,the data only has one page.So I have to set : listview.loadOnDemandMode = 'Manual'; to load data manually.
this.getTransaction(this.selectedIndex, 1).then(
data => {
this.loadData(data);
let listview: RadListView = <RadListView>this.getPage().getViewById('listView');
if (listview && isAndroid) {
listview.loadOnDemandMode = 'Manual';
} else {
listview.loadOnDemandMode = 'Auto';
console.log('sdfdsf');
}
}, request => {
throw request;
})
.catch(
request => {
console.log(JSON.stringify(request._body));
}
);