Nativescript-ui-feedback: Multiple RadListView templates aren't working

[tigrenok00]

Hi,
What could be the reason for the template selector to always go to the first template in HTML, disregarding the selector function (which is being called and returns the correct result)?
Here is my code:

<RadListView #orderLinesView [items]="orderLines" [itemTemplateSelector]="selectItemTemplateList"
        class="list-group" selectionBehavior="Press" multipleSelection="false" 
       (itemSelected)="onItemSelected($event)">

        <ng-template tkTemplateKey="FREE_TEXT" let-item="item">
            <StackLayout>
                 <!-- template here -->
            </StackLayout>
        </ng-template>

        <ng-template tkTemplateKey="CATALOG" let-item="item">
            <StackLayout>
                <!-- template here -->
            </StackLayout>
        </ng-template>

    </RadListView>

selectItemTemplateList(item: OrderLine, index: number, items: Array<OrderLine>) { console.log(item.lineType); return item.lineType.toString(); }

I'm using angular, telerik version 3.0.1.

Thank you!

[VladimirAmiorkov]

Hi @tigrenok00 ,

Can you share with me what the values of the lineTypeare. I see you are using the .toString() in the itemTemplateSelector, maybe the set tkTemplateKeyand that lineType string value are not the exact same values, note that they should be unique in order to match match.

Side note, having a default tkListItemTemplate is a good idea if you are not sure that all items will have a valid tkTemplateKey. Because of there is a item that cannot be matched with a tkTemplateKeythat item will not have a valid template leading to errors while the RadListView is being populated.

[tigrenok00]

Hi,
These are the printed values, both of them exist as a key (tried with a default template, and then it always gets picked). Tried without toString() too. When the items are created, I simply assign them like this:
newLine.lineType = 'CATALOG';

[VladimirAmiorkov]

Hi @tigrenok00 ,

Can you tell us on which platforms you are experiencing this issue?

For the future it will be best to use our "issue template" as it gives us all of the information we may need to reproduce and observe the exact same scenario that is on your environment:

Please, provide the details below:

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

_Yes/No_

Tell us about the problem

_Please, ensure your title is less than 63 characters long and starts with a capital
letter._

Which platform(s) does your issue occur on?

_iOS/Android/Both (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/-pro in the package.json)
• CLI: (run tns --version to fetch it)
• Cross-platform modules: (the version of tns-core-modules in the package.json)
• Runtime(s): (the "tns-android" and "tns-ios" properties in the package.json)

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)_

[tigrenok00]

Android

Progress NativeScript UI version: 3.0.2
CLI: 3.1.1
Cross-platform modules: 3.1.0
Runtime(s): 3.1.1

[VladimirAmiorkov]

Hi @tigrenok00 ,

I was able to reproduce this issue and it is caused by an error in the plugin that matches incorrectly templates declared with non lower case strings in the tkTemplateKey. We have resolved this in our code and the fix will be available with the next official release.

As a workaround you simply need to change both the tkTemplateKey declared in the XML and the item's lineType to be the same strings in lower case.

[tigrenok00]

Pefrect, the workaround works and is fine by any means until the fix, glad we found what the issue was. Thank you!

[lumayara]

I am having the same issue :(

<RadListView [items]="myQuestions" [itemTemplateSelector]="templateSelector" class="list-group" (itemTap)="onItemTap($event)">
<ng-template tkTemplateKey="default" let-item="item">
        <GridLayout rows="auto,auto" columns="6*,*" class="add-dropdown">
            <Label [text]="item.question" class="list-group-item" col="0"></Label>
            <Image src="res://arrow" col="1"></Image>
        </GridLayout>

    </ng-template>
    <ng-template tkTemplateKey="expanded" let-item="item">
        <GridLayout rows="auto,auto" columns="6*,*" class="list-group-item add-dropdown">
            <Label row="0" col="0" [text]="item.question" class="font-weight-bold"></Label>
            <Image row="0" col="1" src="res://arrow_horizontal"></Image>
            <Label row="1" col="0" [text]="item.description" class="show-answer"></Label>
        </GridLayout>

    </ng-template>
</RadListView>

import { Component, OnInit, ViewChild} from "@angular/core";
import { Router } from "@angular/router";
import { Question } from "../../shared/question/question";
import { Observable } from "tns-core-modules/data/observable";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { RadListView, ListViewEventData } from "nativescript-ui-listview";
// import { RadDataFormComponent } from "nativescript-ui-dataform/angular";

import { isIOS, isAndroid } from "platform";
import * as utils from "utils/utils";
declare var UIView, NSMutableArray, NSIndexPath;


@Component({
  selector: "question",
  moduleId: module.id,
  templateUrl: "./question.html",
  styleUrls: ["./question-common.css", "./question.css"]
})
export class QuestionComponent implements OnInit { 
  public myQuestions: ObservableArray<any>;
  public selector: boolean;
  // @ViewChild('myRuntimeDataFormComp') myRuntimeDataFormComp: RadDataFormComponent;
  constructor(){
  }

  ngOnInit() {
    this.myQuestions =new ObservableArray([
      new Question("Topic 1", "lorem ipsum lorem ipsum lorem ipsum",false),
      new Question("Topic 2", "lorem ipsum lorem ipsum lorem ipsum",false),
      new Question("Topic 3", "lorem ipsum lorem ipsum lorem ipsum",false),
      new Question("Topic 4", "lorem ipsum lorem ipsum lorem ipsum",false),
      new Question("Topic 5", "lorem ipsum lorem ipsum lorem ipsum",false),
      new Question("Topic 6", "lorem ipsum lorem ipsum lorem ipsum",false)
      ]); 
      this.selector = false; 
  } 

  templateSelector(item: any, index: number, items: any): string {
    console.log("here: " + item.expanded);
    return item.expanded ? "expanded" : "default";
  }

  onItemTap(event: ListViewEventData) {
    const listView = event.object,
        rowIndex = event.index,
        dataItem = event.view.bindingContext;

    dataItem.expanded = !dataItem.expanded;
    this.selector = dataItem.expanded ? true : false;
    if (isIOS) {
            var indexPaths = NSMutableArray.new();
            indexPaths.addObject(NSIndexPath.indexPathForRowInSection(rowIndex, event.groupIndex));
            listView.ios.reloadItemsAtIndexPaths(indexPaths);

    }
    if (isAndroid) {
        listView.androidListView.getAdapter().notifyItemChanged(rowIndex);
    }
  }
}

It worked with the Iphone but not working with Android.
This is my package.json

"nativescript": {
    "id": "org.nativescript.LCGCorporate",
    "tns-ios": {
      "version": "3.4.1"
    },
    "tns-android": {
      "version": "3.4.2"
    }
  },
  "dependencies": {
    "@angular/animations": "~5.2.0",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/forms": "~5.2.0",
    "@angular/http": "~5.2.0",
    "@angular/platform-browser": "~5.2.0",
    "@angular/platform-browser-dynamic": "~5.2.0",
    "@angular/router": "~5.2.0",
    "email-validator": "^1.1.1",
    "nativescript-angular": "~5.2.0",
    "nativescript-oauth": "^2.1.2",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-dataform": "^3.5.0",
    "nativescript-ui-listview": "^3.5.3",
    "nodeify": "^1.0.1",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.5.0",
    "tns-core-modules": "^3.4.1",
    "zone.js": "~0.8.4"
  },
  "devDependencies": {
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "css-font-family": "^1.0.7",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.6.0",
    "typescript": "~2.6.2"
  }