Hi guys,
I'm having a problem trying to use a radListView inside of the drawerMain.
The view is well formatted and the list well filled but none of my events are triggered ((itemSelected)="onItemSelected($event)") and the pull to refresh is no longer working since I moved the list inside the drawerMain.
Thanks in advance for the help.
I'm testing on ios (Didn't have the chance to try on android) with nativeScript angular.
Version used :
│ nativescript │ 2.1.1 │ 2.1.1 │ Up to date │
│ tns-core-modules│ 2.1.0 │ 2.1.0 │ Up to date │
│ tns-android │ │ 2.1.1 │ Not installed │
│ tns-ios │ 2.1.1 │ 2.1.1 │ Up to date │
Here is my view and my controller :
View :
<
ActionBar
title
=
"Information"
>
<
ActionItem
icon
=
"res://ic_menu"
(tap)="openDrawer()"
ios.position
=
"left"
></
ActionItem
>
</
ActionBar
>
<
RadSideDrawer
#drawer [transition]="sideDrawerTransition">
<
template
drawerSide>
<
GridLayout
class
=
"drawer-content"
>
<
StackLayout
class
=
"sideStackLayout"
>
<
StackLayout
class
=
"sideTitleStackLayout"
>
<
Label
text
=
"Navigation Menu"
></
Label
>
</
StackLayout
>
<
StackLayout
class
=
"sideStackLayout"
>
</
StackLayout
>
</
StackLayout
>
</
GridLayout
>
</
template
>
<
template
drawerMain>
<
GridLayout
class
=
"grid"
rows
=
"auto, *"
>
<
RadListView
row
=
"1"
[items]="dataItems"
pullToRefresh
=
"true"
(pullToRefreshInitiated)="onPullToRefreshInitiated($event)"
selectionBehavior
=
"Press"
(itemSelected)="onItemSelected($event)">
<
template
listItemTemplate
let-item
=
"item"
>
<
StackLayout
orientation
=
"vertical"
>
<
Label
class
=
"titleLabel"
[text]="item.Title"></
Label
>
<
Label
class
=
"descriptionLabel"
[text]="item.ShortDescription"></
Label
>
<
GridLayout
width
=
"auto"
height
=
"2"
style.backgroundColor
=
"lightgray"
>
</
GridLayout
>
</
StackLayout
>
</
template
>
</
RadListView
>
</
GridLayout
>
</
template
>
</
RadSideDrawer
>
Controller :
import {EventService} from
"../../Shared/Event/Event.service"
;
import {Event} from
"../../Shared/Event/Event"
import {NS_ROUTER_DIRECTIVES} from
'nativescript-angular/router'
;
import {ObservableArray} from
"data/observable-array"
;
import {Component, ViewChild, Inject, ChangeDetectorRef, OnInit} from
"@angular/core"
;
import {Router} from
"@angular/router"
;
import * as sideDrawerModule from
"nativescript-telerik-ui/sidedrawer"
import {RadSideDrawerComponent, SideDrawerType} from
"nativescript-telerik-ui/sidedrawer/angular"
;
import {Page} from
"ui/page"
;
var
Timer = require(
"timer"
);
@Component({
selector:
"list"
,
templateUrl:
"Pages/List/List.xml"
,
styleUrls: [
"Pages/List/List-common.css"
],
providers: [EventService]
})
export class ListPage {
private _sideDrawerTransition: sideDrawerModule.DrawerTransitionBase;
public _items: ObservableArray<Event>;
constructor( @Inject(Page) private _page: Page, private _changeDetectionRef: ChangeDetectorRef, private _router: Router, private _eventService: EventService) {
this
._page.on(
"loaded"
,
this
.onLoaded,
this
);
}
@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;
ngAfterViewInit() {
this
.drawer =
this
.drawerComponent.sideDrawer;
this
._changeDetectionRef.detectChanges();
}
ngOnInit() {
this
._items =
new
ObservableArray(
this
._eventService.getEvents());
}
public onLoaded(args) {
this
._sideDrawerTransition =
new
sideDrawerModule.PushTransition();
}
public onItemSelected(args) {
var
listview = args.object;
var
selectedItems = listview.getSelectedItems() as Array<Event>;
var
itemSelected = selectedItems[0];
console.log(
"------------------------ ItemTapped: "
, itemSelected.Id);
listview.deselectAll();
this
._router.navigate([
'/detail'
, itemSelected.Id]);
}
public onPullToRefreshInitiated(args) {
var
that =
new
WeakRef(
this
);
Timer.setTimeout(
function
() {
var
listView = args.object;
listView.notifyPullToRefreshFinished();
// Here make the refresh of the list
}, 1000);
}
get dataItems(): ObservableArray<Event> {
return
this
._items;
}
// Drawer
public get sideDrawerTransition(): sideDrawerModule.DrawerTransitionBase {
return
this
._sideDrawerTransition;
}
public openDrawer() {
this
.drawer.showDrawer();
}
}