RadListView inside RadSideDrawer problem

5 posts, 0 answers
  1. Alexandre
    Alexandre avatar
    3 posts
    Member since:
    Mar 2016

    Posted 27 Jul Link to this post

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

  2. Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 28 Jul Link to this post

    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
    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. Alexandre
    Alexandre avatar
    3 posts
    Member since:
    Mar 2016

    Posted 28 Jul in reply to Vladi Link to this post

    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

  4. Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 19 Aug Link to this post

    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
    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. Alexandre
    Alexandre avatar
    3 posts
    Member since:
    Mar 2016

    Posted 06 Sep Link to this post

    Hi Vladi,

    It works fine, thanks :) 

Back to Top