RadSideDrawer contains RadListView

5 posts, 1 answers
  1. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 28 Nov 2016 Link to this post

    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? 

     

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 28 Nov 2016 Link to this post

    Hi,
    Thank you for your interest in UI for NativeScript.

    To access the RadListView reference via code behind, you could use the `page` instance and to access to component while using getViewById method on ngAfterViewInit. For your help 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
    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. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 28 Nov 2016 in reply to nikolay.tsonev Link to this post

    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>

  4. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 28 Nov 2016 Link to this post

    Hello,

    Thank you for sharing your code.
    You could use the same scenario with accessing the ListView while using getViewById() method, when the RadListView is inside the SideDrawer. Due to some missing resources, I was unable to reuse your code, however 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>
    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. If you still experience problems please send me the missing resources: RadListView dataItem structure and gpm-datepicker-dialog custom component, which you have used in your code.


    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
  5. License
    License avatar
    43 posts
    Member since:
    Oct 2016

    Posted 28 Nov 2016 in reply to nikolay.tsonev Link to this post

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

Back to Top