Exception on updating RadListView

8 posts, 0 answers
  1. Michele
    Michele avatar
    6 posts
    Member since:
    Jun 2017

    Posted 19 Aug Link to this post

    Hello,

    this is my first post on forum. First of all, I'd like to thanks Telerik for good job with the nativescript :)

    I'm having issue on updating RadListView and I don't know why because it was working well just before...

    the issue is:

    Calling js method onCreateViewHolder failed

    TypeError: rootLocator is not a function

     

    app.module.ts:

    import { NgModule, Component, NO_ERRORS_SCHEMA } from "@angular/core";

    import { NativeScriptUIListViewModule } from "nativescript-telerik-ui-pro/listview/angular";

    ...

    @NgModule({
         declarations: [
              AppModule,

              ...
         ],
         imports: [
              NativeScriptModule,

              ...
              NativeScriptUIListViewModule,

         ],
         schemas: [NO_ERRORS_SCHEMA],
         bootstrap: [AppModule],
         providers: []
    })

     

     

    xml:

    <RadListView [items]="dataItems">
         <ng-template tkListItemTemplate let-item="item">
              <StackLayout orientation="vertical">
                   <Label [text]="item.title"></Label>
              </StackLayout>
         </ng-template>
    </RadListView>

     

     

    component:

    ...

    get dataItems() {
         let array = new ObservableArray<GalleryItem>();
         let item = new GalleryItem();
         item.title = "title";
         array.push(item);
         return array;
    }

     

    NativeScript 3.1.3

    nativescript-telerik-ui-pro 3.0.4

     

    Can you help me

    Thanks

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    286 posts

    Posted 21 Aug Link to this post

    Hello,
    Thank you for contacting us.

    I reviewed your code on my side, however, I was unable to recreate your problem and the nativescript-telerik-ui-pro plugin seems to work as expected. For your convenience, I am attaching sample project and screenshot from the simulator.

    Please review the attached sample project and make the needed changes, which will allow me to debug your problem locally. It would also help if you could give me more info about your environment(nativescript-angular node versions).

    In the meantime, you could try to delete node_modules, hooks and platforms folders and to rebuild your project. Also, make sure that you are using the latest `@angular`. For your help, I am attaching sample package.json file.
    {
      "description": "NativeScript Application",
      "license": "SEE LICENSE IN <your-license-filename>",
      "readme": "NativeScript Application",
      "repository": "<fill-your-repository-here>",
      "nativescript": {
        "id": "org.nativescript.test",
        "tns-android": {
          "version": "3.1.1"
        }
      },
      "dependencies": {
        "@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",
        "nativescript-telerik-ui-pro": "^3.0.4",
        "nativescript-theme-core": "~1.0.2",
        "reflect-metadata": "~0.1.8",
        "rxjs": "~5.4.2",
        "tns-core-modules": "~3.1.0",
        "zone.js": "~0.8.2"
      },
      "devDependencies": {
        "babel-traverse": "6.26.0",
        "babel-types": "6.26.0",
        "babylon": "6.18.0",
        "lazy": "1.0.11",
        "nativescript-dev-typescript": "~0.5.0",
        "typescript": "~2.4.2"
      }
    }

    Regards,
    nikolay.tsonev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Michele
    Michele avatar
    6 posts
    Member since:
    Jun 2017

    Posted 21 Aug Link to this post

    Thanks, 

    I've updated tns, @angular and telerik-ui-pro, rebuild and now it works, but some api code (like http) seems to works differently.

    Can I preserve back compatibility even if updating tns and angular?

     

    Thanks

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    286 posts

    Posted 21 Aug Link to this post

    Hi Michele,

    All modules provided by the tns-core-modules, and nativescript-angular should work as expected also after you upgrade their versions. However, if you have an issue with some of the modules( for example HTTP module), please provide some further info and steps for reproducing or sample project, which will help us to reproduce the case.

    Bear in mind that you should also upgrade the nativescript-angular to its latest version 4.2.0.

    Regards,
    nikolay.tsonev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. Michele
    Michele avatar
    6 posts
    Member since:
    Jun 2017

    Posted 21 Aug Link to this post

    Thanks,

    before than updating, I was using http standard library of NativeScript and I was able to download image data from url (with authorization header), save it as base64 (I need to save it as base64) and show in a image into listview correctly. The code was the next:

    http.request({
         url: imgurl,
         method: "GET",
         headers: {
              ...
         }
    }).then((response:any)=> {
         response.content.toImage()
               .then((image)=> {
                     let base64 = image.toBase64String("jpg");
                     ...

                })

    })

     

    Now, using Angular http library, I have the next code:

     

    this.http.get(
          imgurl,
    {
         headers: headers
    }
    ).subscribe((data)=>{
         let imageData = data["_body"];

         ...

    }

     

    But how can I obtain base64 string of image?

     

    I tried also this:

    let img = new ImageSource();
         img.fromData(imageData).then(
              (res) => {
                   let base64 = img.toBase64String("jpg");
               }
          )

     

    but unsuccessfully.

    Can you suggest me the right way? thanks :)

  6. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    286 posts

    Posted 21 Aug Link to this post

    Hello Michele,

    The Angular HTTP module expects the server to return a JSON object, however, if the server returns a request different format then you will receive a parsing error. 
    To get the image you could use the HTTP modules provided by tns-core-modules and its method getImage. This method will return an imageSource, which could be converted to base64String. For example:

    import { Component, OnInit } from "@angular/core";
    import {getImage} from "http"
    import {ImageSource} from "image-source"
     
    @Component({
        moduleId: module.id,
        templateUrl: "./http-get.component.html",
    })
    export class HttpGetComponent implements OnInit {
     
        constructor() { }
     
        ngOnInit() {
        }
     
        test() {
            getImage("https://httpbin.org/image/jpeg").then(function (r:ImageSource) {
                console.log("result");
                console.dir(r);
                console.log("image source");
                console.log(r.toBase64String("jpeg"));
     
            }, function (e) {
                //// Argument (e) is Error!
                console.log("error");
                console.log(e)
            });
        }
    }
    Let me know if this is applicable to your case.


    Regards,
    nikolay.tsonev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  7. Michele
    Michele avatar
    6 posts
    Member since:
    Jun 2017

    Posted 21 Aug in reply to nikolay.tsonev Link to this post

    Please help me... :)

    import {getImage} from "http"

    says "Module 'http' has no exported member 'getImage'

     

    If I try to import as:

    import * as http from "http"

     

    I see only methods get and request.

    And if i try to use request method as:

    http.request({
         url: url
         method: "GET",
         headers: {
            ...
         }
    }).then((response:any)=> {

         ...
    });

     

    it says:

    Argument of type '{ url: string; method: string; headers: { ...}; }' is not assignable to parameter of type 'RequestOptions'.

     

    I need to get image as base64 string and in the http get call I must specify custom headers

  8. Michele
    Michele avatar
    6 posts
    Member since:
    Jun 2017

    Posted 21 Aug Link to this post

    Solved importing as 

    import * as Http from "tns-core-modules/http"

     

    I don't know why it conflicts...

    Thanks for your support.

    BR

Back to Top