Upgrading to 3.0

Thread is closed for posting
8 posts, 0 answers
  1. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 12 Jul 2017 Link to this post

    Hello,

     

    I upgraded the plugin to version 3.0 and I am running into an issue when running the same code which worked before.

    It appears to be related to the list view. Look at attached screenshot.

  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 12 Jul 2017 Link to this post

    Hi Ericky,

    Try to remove platforms and node_modules folders from the project and to clear npm cache with
    npm cache clean

    Also, delete the application from the emulator. Then try to rebuild the application with 
    tns run android
     In case this does not resolve your issue, please provide some sample project, which could be debugged locally. It would help if you could provide and info about your environment (NativeScirpt CLI, modules, node versions),
    Thank you in advance for your cooperation.

    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. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 12 Jul 2017 in reply to Nikolay Tsonev Link to this post

    Here is the test application. I just simply added nativescript-telerik-ui plugin and tried to use the RadListView.

     

    Sample App

  4. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 13 Jul 2017 Link to this post

    Hello,

    Can you please check which version of the nativescript-angular plugin are you using? You should be using:
    "nativescript-angular": "~3.1.0", if no,  please change the version of the plugin in your project package.json file
     Bear in mind that you should also remove node_modules, platforms and hooks folders before rebuilding the app.

    Let me know if I could assist you further.

    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. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 13 Jul 2017 in reply to Nikolay Tsonev Link to this post

    Hello Nikolay,

     

    That solved that issue. But now I am getting more errors related to the RadListView. You can see them in the screenshots attached.

    There should be an article or something about the breaking changes in this new version.

     

    Examples of the code that worked and isn't working anymore.

    <RadListView *ngIf="conversations.length" [items]="conversations" rows="0" (itemLoading)="onItemLoading($event)" backgroundColor="transparent"
          selectionBehavior="None" swipeActions="true" (itemSwipeProgressChanged)="onCellSwiping($event)"
          (itemSwipeProgressStarted)="onSwipeCellStarted($event)" (itemTap)="viewConversation($event)">
          <ng-template tkListItemTemplate let-item="item" let-index="index">
            <GridLayout rows="auto">
              <StackLayout class="conversation" [class.first]="index === 0" [class.last]="index === conversations.length - 1">
                <DockLayout orientation="horizontal">
                  <Label dock="right" [text]="item.dateString" verticalAlignment="center"></Label>
                  <Label dock="left" class="title" [text]="item.otherUserCard.fullName" verticalAlignment="center"></Label>
                </DockLayout>
                <Label *ngIf="item.message" class="last-message" [text]="item.message"></Label>
              </StackLayout>
            </GridLayout>
          </ng-template>
     
          <GridLayout *tkListItemSwipeTemplate columns="auto">
            <StackLayout id="delete-view" class="delete-button" (tap)="delete($event)">
              <StackLayout orientation="horizontal" horizontalAlignment="center">
                <Label id="icon" class="btn icon" [text]="'\ue81c'" verticalAlignment="center"></Label>
              </StackLayout>
            </StackLayout>
          </GridLayout>
        </RadListView>
    <RadListView #radListView scrollPosition="Top" backgroundColor="transparent" (itemLoading)="onItemLoading($event)" #contactsView [items]="filteredItems">
        <ListViewLinearLayout *ngIf="showContacts" tkListViewLayout scrollDirection="Vertical" itemHeight="140"></ListViewLinearLayout>
        <ng-template tkListItemTemplate let-item="item" let-index="index">
          <StackLayout class="item" [class.first]="index === 0" (tap)="itemTapped(item)">
            <ink-list-user *ngIf="showContacts" [user]="item"></ink-list-user>
            <ink-list-event *ngIf="showEvents" [event]="item"></ink-list-event>
            <ink-list-connection *ngIf="showConnections" [connection]="item" [selected]="selected.indexOf(item) > -1"></ink-list-connection>
          </StackLayout>
        </ng-template>
      </RadListView>

     

    Thanks.

  6. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 13 Jul 2017 Link to this post

    Hi,

    Indeed there was a problem while using RadListView in NativeScirpt Angular 2 application, which was related to a change in the nativescript-angular plugin, which brakes using ng-template.

    However, this is already fixed in our upcoming release and to be able to keep work on your project, you could use a @next version of the nativescript-teleril-ui plugin. Also to be able to use the next version you should also change the version of tns-core-modules and nativescript-angular . For further help, you could also review the attached package.json file, where the needed changes have been made.

    package.json

    {
      "description": "NativeScript Application",
      "license": "SEE LICENSE IN <your-license-filename>",
      "readme": "NativeScript Application",
      "repository": "<fill-your-repository-here>",
      "nativescript": {
        "id": "org.nativescript.uiprotest",
        "tns-android": {
          "version": "3.1.1"
        },
        "tns-ios": {
          "version": "3.1.0"
        }
      },
      "dependencies": {
        "@angular/animations": "~4.1.0",
        "@angular/common": "~4.1.0",
        "@angular/compiler": "~4.1.0",
        "@angular/core": "~4.1.0",
        "@angular/forms": "~4.1.0",
        "@angular/http": "~4.1.0",
        "@angular/platform-browser": "~4.1.0",
        "@angular/router": "~4.1.0",
        "nativescript-angular": "next",
        "nativescript-telerik-ui": "next",
        "nativescript-theme-core": "~1.0.2",
        "reflect-metadata": "~0.1.8",
        "rxjs": "~5.3.0",
        "tns-core-modules": "next",
        "zone.js": "~0.8.2"
      },
      "devDependencies": {
        "babel-traverse": "6.25.0",
        "babel-types": "6.25.0",
        "babylon": "6.17.4",
        "lazy": "1.0.11",
        "nativescript-dev-typescript": "~0.4.0",
        "typescript": "~2.2.1"
      }
    }

    Also make sure to delete platforms, node_modules and hooks folders before rebuilding the app.
    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. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 13 Jul 2017 in reply to Nikolay Tsonev Link to this post

    Hello,

     

    How can I use the "next" version of nativescript-telerik-ui-pro?

     

    Thanks for replying.

  8. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 13 Jul 2017 Link to this post

    Hello,
    In your case, you could simply change the package name from nativescript-telerik-ui to nativescript-telerik-ui-pro in your package.json file. For example:

    {
      "description": "NativeScript Application",
      "license": "SEE LICENSE IN <your-license-filename>",
      "readme": "NativeScript Application",
      "repository": "<fill-your-repository-here>",
      "nativescript": {
        "id": "org.nativescript.uiprotest",
        "tns-android": {
          "version": "3.1.1"
        },
        "tns-ios": {
          "version": "3.1.0"
        }
      },
      "dependencies": {
        "@angular/animations": "~4.1.0",
        "@angular/common": "~4.1.0",
        "@angular/compiler": "~4.1.0",
        "@angular/core": "~4.1.0",
        "@angular/forms": "~4.1.0",
        "@angular/http": "~4.1.0",
        "@angular/platform-browser": "~4.1.0",
        "@angular/router": "~4.1.0",
        "nativescript-angular": "next",
        "nativescript-telerik-ui-pro": "next",
        "nativescript-theme-core": "~1.0.2",
        "reflect-metadata": "~0.1.8",
        "rxjs": "~5.3.0",
        "tns-core-modules": "next",
        "zone.js": "~0.8.2"
      },
      "devDependencies": {
        "babel-traverse": "6.25.0",
        "babel-types": "6.25.0",
        "babylon": "6.17.4",
        "lazy": "1.0.11",
        "nativescript-dev-typescript": "~0.4.0",
        "typescript": "~2.2.1"
      }
    }
    When the node_modules and platform are removed and the project rebuild with tns run <platform_name> all dependencies will be download again.
    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.
Back to Top