Radlistveiw shows blank page

[nelsonwilliam11]

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow?

_Yes/

Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital letter. Radlistview does not show the template and it gives no errors

Which platform(s) does your issue occur on?

/Android(if applicable tell us the specific version of the platform)_

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: (the version of nativescript-telerik-ui)
• CLI: (run tns --version to fetch it) 3.2.0
• Cross-platform modules: (the version of tns-core-modules in the package.json) 3.1.0
• Runtime(s): (the "tns-android" and "tns-ios" properties in the package.json) "tns-android" "version": "3.0.1"

Please tell us how to recreate the issue in as much detail as possible.

1. Start the application ..
2. ...

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

(You can paste entire code snippets or attach a runnable project)

import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { DataItem } from "../dataItem";
import * as Application from "application";
import * as Timer  from "timer";
import { DataItemService } from "../dataItem.service"; 

@Component({
  selector: "main",  
  moduleId: module.id,
  providers: [DataItemService],
  templateUrl: "./main.html",
  styleUrls: ["./main-common.css"],

export class  MainComponent implements OnInit {
    private _dataItems: ObservableArray<DataItem>;

    constructor(private _changeDetectionRef: ChangeDetectorRef, private _dataItemService: DataItemService) {
    }

    ngOnInit() {
        this._dataItems = new ObservableArray<DataItem>(this._dataItemService.getListItemsFromJson());
        this._changeDetectionRef.detectChanges();
    }

    public get dataItems(): ObservableArray<DataItem> {
        return this._dataItems;
    }
}

XML

<GridLayout tkExampleTitle tkToggleNavButton>
    <RadListView [items]="staggeredItems">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical" class="item-template-style">
 <Image *tkIfIOS [src]="item.image" stretch="aspectFill"></Image>
                <FrescoDrawee *tkIfAndroid height="250" [imageUri]="item.image"></FrescoDrawee>
                <Label [text]="item.name"></Label>
                <Label [text]="item.description" textWrap="true"></Label>
            </StackLayout>
        </ng-template>

        <!-- >> angular-listview-item-layouts-staggered -->
        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="3"></ListViewStaggeredLayout>
        <!-- << angular-listview-item-layouts-staggered -->
    </RadListView>
</GridLayout>

[ginev]

@nelsonwilliam11 - can you please take a look at the corresponding ListView example here: https://github.com/telerik/nativescript-ui-samples-angular/tree/release/sdkAngular/app/listview/item-layouts

and see if it helps?

[nelsonwilliam11]

thats the source am using now so it gives the same results

[VladimirAmiorkov]

@nelsonwilliam11 Are you observing this behavior inside the sdk repository app or in a different app that uses some of those code snippets. If it is the second can you give us some details on how the routing of the app is setup, maybe you have placed the RadListView inside a StackLayout somewhere which is not supported but the listview. Are you using page-router-outlet or the default router-outlet?

[nelsonwilliam11]

@VladimirAmiorkov am using it in a different app

template: "<page-router-outlet></page-router-outlet>"

[VladimirAmiorkov]

@nelsonwilliam11 Can you share with us the UI structure of your app, as mentioned placing the RadListView inside a layout which measure itself with infinity is not supported and may lead to unexpected behaviors. If you could reproduce this is a sample project and send it to us it would be very helpful in further investigating the case.

[nelsonwilliam11]

import * as Facebook from "nativescript-facebook";
import { NavigationService } from "../../services/navigation.service";
import { config } from "../../app.config";
let http = require("http");
let appSettings = require("application-settings");
import * as fbLogout  from "nativescript-facebook";
import { Demo } from "../../main-view-model";
import * as elementRegistryModule from 'nativescript-angular/element-registry';
elementRegistryModule.registerElement("CardView", () => require("nativescript-cardview").CardView);
import listViewModule = require("nativescript-telerik-ui/listview");
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { DataItem } from "./dataItem";
import { ListViewLinearLayout } from "nativescript-telerik-ui/listview";
import { DataItemService } from "./dataItem.service";
import { SearchBar } from "ui/search-bar";
import { FrescoDrawee } from "nativescript-fresco";
import { StackLayout } from "ui/layouts/stack-layout";
import { Label } from "ui/label";
import { TabView, SelectedIndexChangedEventData, TabViewItem } from "ui/tab-view";
import { View } from "ui/core/view";
import { Router } from "@angular/router";
import { Component, OnInit, ChangeDetectorRef } from "@angular/core";

import * as Application from "application";
import * as Timer  from "timer";

import { RouterExtensions } from "nativescript-angular/router";

 @Component({
  selector: "main",  
  moduleId: module.id,
  providers: [DataItemService],
  templateUrl: "./main.html",
  styleUrls: ["./main-common.css"],

})
export class MainComponent implements OnInit  {
 private _dataItems: ObservableArray<DataItem>;
 private _layout: ListViewLinearLayout;
 private _staggeredItems: ObservableArray<DataItem>;

    public tabviewitems: Array<TabViewItem>;
public searchPhrase: string;

     constructor(private _changeDetectionRef: ChangeDetectorRef, private _dataItemService: DataItemService, private ref: ChangeDetectorRef, private navigationService: NavigationService,private routerExtensions: RouterExtensions, private router: Router) {

      this.tabviewitems = [];

}

       public tabIndexChanged(e: any) {

        switch (e.newIndex) {
            case 0:
                console.log(`Selected tab index: ${e.newIndex}`);
                break;
           case 1:
                console.log(`Selected tab index: ${e.newIndex}`);
                break;
           case 2:
                console.log(`Selected tab index: ${e.newIndex}`);
                break;
           case 4:
                console.log(`Selected tab index: ${e.newIndex}`);
                break;

            default:
                break;
        }
       }
     public tabViewIndexChange(res) {
        alert("Tab View selected index: " + res);

    }

    createTabItem(title: string, view: View): TabViewItem {
        const item = new TabViewItem();
        item.title = title;
        item.view = view;
        return item;

    }
     ngOnInit(): void {
          this._dataItems = new ObservableArray<DataItem>(this._dataItemService.getListItemsFromJson());
        this._changeDetectionRef.detectChanges();
         this._staggeredItems = new ObservableArray<DataItem>(this._dataItemService.getStaggeredItems());
        this._changeDetectionRef.detectChanges();

     }
     public get dataItems(): ObservableArray<DataItem> {
        return this._dataItems;
    }
    public get staggeredItems(): ObservableArray<DataItem> {
        return this._staggeredItems;
    }

     test(){
           this.routerExtensions.navigate(["/list"])

     }

  public onSubmit(args) {
        let searchBar = <SearchBar>args.object;
        alert("You are searching for " + searchBar.text);
    }

    public onTextChanged(args) {
        let searchBar = <SearchBar>args.object;
        console.log("SearchBar text changed! New value: " + searchBar.text);
    }
     logout() {

            this.routerExtensions.navigate(["/login"]);
        }
}

[nelsonwilliam11]

<ActionBar title='', style="background-color:#456">
   <SearchBar hint="Search hint" [text]="searchPhrase" (textChange)="onTextChanged($event)" (submit)="onSubmit($event)" 
            color="white" textFieldBackgroundColor="#456" textFieldHintColor="white"></SearchBar>
             <Button text="Log out (custom)" (tap)="logout()"></Button>
    </ActionBar>

 <TabView #tabview (selectedIndexChanged)="tabIndexChanged($event)" toggleNavButton>
    <StackLayout *tabItem="{title: '', iconSource:'res://hh'}"> 
<GridLayout tkExampleTitle tkToggleNavButton>
    <RadListView [items]="staggeredItems">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical" class="item-template-style">
 <Image *tkIfIOS [src]="item.image" stretch="aspectFill"></Image>
                <FrescoDrawee *tkIfAndroid height="250" [imageUri]="item.image"></FrescoDrawee>
                <Label [text]="item.name"></Label>
                <Label [text]="item.description" textWrap="true"></Label>
            </StackLayout>
        </ng-template>

        <!-- >> angular-listview-item-layouts-staggered -->
        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="3"></ListViewStaggeredLayout>
        <!-- << angular-listview-item-layouts-staggered -->
    </RadListView>
</GridLayout>
    </StackLayout>

    <StackLayout *tabItem="{title: '', iconSource:'res://noti'}">

         </StackLayout>
      <StackLayout *tabItem="{title: '', iconSource:'res://aaa'}" >
               <camera></camera>
              </StackLayout>
    <StackLayout *tabItem="{title: '',iconSource:'res://tex' }" >
            <chat></chat>
              </StackLayout>

    <StackLayout *tabItem=  "{title: '', iconSource:'res://user' }" >
       <user></user>

    <StackLayout sdkToggleNavButton>
          </StackLayout>
          </StackLayout>

<!-- >> action-bar-title-icon-html -->
</TabView>

[VladimirAmiorkov]

Hi @nelsonwilliam11 ,

I see that the RadListViewis placed inside a GridLayoutwhich is placed inside a StackLayout. Can you try to remove that <StackLayout *tabItem="{title: '', iconSource:'res://hh'}">... and see if the RadListView is shown accordingly?

[nelsonwilliam11]

still not showing i also tried to put use it without putting inside any stacklayout or tabview but still shows a blank page. it been four days now struggling with that

[VladimirAmiorkov]

@nelsonwilliam11 Can you verify that running our sdk examples that can be found here shows the same results?

Also if you can send is a runnable project that shows the discussed issue we will be able to further investigate your case but without being able to reproduce it on our side we cannot assist you accordingly.

[nelsonwilliam11]

@VladimirAmiorkov i would like to send my whole project so you can do further investigations if you may tell me how to send it i will appreciate that thanks

[VladimirAmiorkov]

@nelsonwilliam11 you can zip the folder of your {N} app (without the node_nodules and platform folders) and upload it to a comment here.

[nelsonwilliam11]

@VladimirAmiorkov here is my {N} app

Go.zip

[davorpeic]

@nelsonwilliam11 I also checked your repo as I was scratching my head for few hours, I see you are still on very old version of "nativescript-angular": "^2.0.0-rc.1", I was on v3.0.0 so I updated all my dependencies to this:

"@angular/animations": "~4.2.0",
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/router": "~4.2.0",
    "nativescript-angular": "~4.2.0",

and this fixed my 'not showing radlistview' problem. Most probably updating nativescript-angular fixed the issue, but to avoid dependencies errors, better to put all in the same level :)

Also be sure you are using "nativescript-telerik-ui": "^3.0.4",

Can you try and let us know if this fixes the issue? dp

[nelsonwilliam11]

@davorpeic thanks soo much updating nativescript-angular solved the problem and thank you @VladimirAmiorkov for you suggestions

[Sharique-Hasan]

Hi @VladimirAmiorkov I am still facing this issue. I have put RadListView on root of my modal. I have nativescript-angular:~3.0.0 and I am using nativescript-pro-ui for RadListView. But I am still seeing the blank modal in my android app.