This is a migrated thread and some comments may be shown as answers.

[Solved] RadSideDrawer contains RadListView

4 Answers 219 Views

SideDrawer

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

4 Answers, 1 is accepted

answered on 28 Nov 2016, 11:24 AM

Hi,
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

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

answered on 28 Nov 2016, 12:31 PM

Thank you,

But my code is in the RadSideDrawer,the code is follows: Can you check the code in RadSideDrawer?

//transaction.component.html

Accepted

answered on 28 Nov 2016, 12:58 PM

Hello,

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>

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 --dialog custom component, which you have used in your code.

Regards,
nikolay.tsonev
Telerik by Progress

answered on 29 Nov 2016, 03:18 AM

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