RadListView inside RadSideDrawer problem

[Alexandre]

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

[Vladi]

Hello Alexandre,

Thank you for contacting us.

I managed to reproduce the described issue on iOS and indeed it looks like there is an issue causing the callbacks of the itemSelected and pullToRefreshInitiated to not be called while used with angular 2. I tested this scenario also on Android and on that platform it works as expected.

We are currently investigating the cause of this behavior and I will update this thread with more information when available. I updated your Telerik points for bringing this to our attention.

Regards,
Vladi
Telerik by Progress

[Alexandre]

Hi Vladi,

Thanks for your answer.

I worked on it today and I found some clues.

I managed to make it work if I navigate to another page and come back to the one with the list.

Maybe it's when the first page instantiated by the app is the one with the RadSideDrawer that we can reproduce this issue.

Hope it will help.

Regards,

Alexandre

[Vladi]

Hi Alexandre,

The discussed issue has been resolved in the latest 1.3.1 version of nativescript-telerik-ui. You can also take a look at this github issue about the same scenario.


Regards,
Vladi
Telerik by Progress

[Alexandre]

Hi Vladi,

It works fine, thanks :)