RE: RadListView selectItemAt doesn't seem to be working

plugins

#1

I am testing the RadListView SelectItemAt in my project but it doesn’t seem to work. So, I create a fresh project and test it.

I run the following commands

  1. tns create testrdl --template tns-template-blank-ng
  2. cd testrdl
  3. tns plugin add nativescript-ui-listview

I make changes to the following files

  1. app/home/home.modules.ts
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";

import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";


@NgModule({
    imports: [
        NativeScriptCommonModule,
        NativeScriptUIListViewModule,
        HomeRoutingModule
    ],
    declarations: [
        HomeComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class HomeModule { }
  1. app/home/home.component.html
<ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>	

<StackLayout>
    <Label text="This is the radlistview here"></Label>
    <RadListView [items]="items" #listview id="listview"
    multipleSelection="true" selectionBehavior="Press"
    >
        <ng-template tkListItemTemplate let-item="item">
            <Label [text]="item"></Label>
        </ng-template>
        <ListViewLinearLayout tkListViewLayout itemHeight="90" scrollDirection="Vertical"></ListViewLinearLayout>
    </RadListView>
</StackLayout>
  1. app/home/home.component.ts
import { Component, OnInit, ViewChild, AfterContentInit, AfterViewInit } from "@angular/core";
import { RadListViewComponent } from "nativescript-ui-listview/angular";


@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit, AfterContentInit, AfterViewInit {
    public items: string[] = ['aaaa', 'bbbb', 'cccc'];
    @ViewChild('listview') public listview: RadListViewComponent

    constructor() {
    }

    ngOnInit(): void {

    }

    ngAfterContentInit() {
        console.log("it reach the after content init");

    }

    ngAfterViewInit() {
        console.log("it reach the after view init");
        // this.listview.listView.selectAll();
        **_this.listview.listView.selectItemAt(1);  // it doesn't select the item at all._** 

    }
}

I were spending few days in google but I am not able to solve it until now.

Appreciate if anyone can give me clues on how to fix this issue.

thanks!


#2

Does it work when you add a timeout for few seconds? Trying to make sure whether the list is ready with items for you to select one in after view init.


#3

This is a surprise for me. i did use the setTimeout before and it doesn’t work. However, when I try the setTimeout in fresh project and my existing projects, it works as expected.

Thanks so much for your guide. Highlight appreciated for your help.