title: Anything wrong with this simple RadListView? Tapping produces error page
body: <p>I had asked a similar question but had to go away for a month and it has dropped off the radar.</p>
  
  <p>I have a very basic RadListView that I am populating using the (loaded) listener in the RadListView.</p>
  
  <pre><code>&lt;GridLayout orientation="vertical"&gt;
  &lt;RadListView [items]="reports" (loaded)="onListLoaded2($event)"&gt;
          &lt;ng-template tkListItemTemplate let-item="item"&gt;
          &lt;StackLayout class="itemTemplateStackLayout" orientation="vertical"&gt;
                  &lt;StackLayout class="reportStackLayout" orientation="vertical"&gt;                           
                      &lt;Label class="labelName blue_text bold_text list-group-item" [text]="item.report_name"&gt;&lt;/Label&gt;                        
                      &lt;GridLayout class="reportDetailsGridLayout" columns="*, *"&gt;
                          &lt;Label row="0" col="0" horizontalAlignment="left" [class]="item.status_class" class="labelStatus"  [text]="item.status_text" textWrap="true"&gt;&lt;/Label&gt;
                          &lt;Label row="0" col="1" horizontalAlignment="right" class="labelValue green_text bold_text" [text]="item.report_value" textWrap="true"&gt;&lt;/Label&gt;
                      &lt;/GridLayout&gt;
                  &lt;/StackLayout&gt;
          &lt;/StackLayout&gt;
      &lt;/ng-template&gt;         
  &lt;/RadListView&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the component code.</p>
  
  <pre><code>public onListLoaded2(args: ListViewEventData) {
  
      this._reports = new ObservableArray&lt;Report&gt;();
  
      this._reports.push(new Report(1, "Mileage Claims", 2, 332.45, "Submitted", "status_orange", "Travel expenses for October"));
      this._reports.push(new Report(0, "October Expenses", 2, 32.45, "Approved", "status_green", "Expense claims for October"));
  
      this.isLoading=false;        
  }
  public get reports(): ObservableArray&lt;Report&gt; {
      return this._reports;
  }  
  </code></pre>
  
  <p>This displays two reports as expected.</p>
  
  <p>I want to be able to tap on one and get the detail page. However tapping anywhere produces an error page such as:</p>
  
  <pre><code>An uncaught Exception occurred on "main" thread.
  com.tns.NativeScriptException: 
  Calling js method onItemClick failed
  
  TypeError: listView._listViewAdapter.isGroupHeader is not a function
  File: "file:///data/data/org.nativescript.myApp/files/app/tns_modules/nativescript-ui-listview/ui-listview.js, line: 539, column: 62
  
  StackTrace: 
  Frame: function:'onItemClick', file:'file:///data/data/org.nativescript.myApp/files/app/tns_modules/nativescript-ui-listview/ui-listview.js', line: 539, column: 63
  
  
  at com.tns.Runtime.callJSMethodNative(Native Method)
  at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)....etc.
  </code></pre>
  
  <p>I did have an itemTap listener on the RadListView but got the same error page.</p>
  
  <p>Any ideas? TIA</p>
  
  <p>==========================
  UPDATE</p>
  
  <p>@ogrodowiczp - I tried that and it did not work. Maybe there is a wider issue? I created another test component with a simple RadListView and am getting the same error page when I tap on it. Maybe I have not got it set up properly? I have uninstalled and re-installed the plugin.</p>
  
  <p>My app.module.ts looks like this:</p>
  
  <pre><code>import { NativeScriptHttpModule } from "nativescript-angular/http";
  ...
  ...
  imports: [
  ...
  NativeScriptUIListViewModule,
  ...
  ],
  ...
  </code></pre>
  
  <p>and my package.json:</p>
  
  <pre><code>  {
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN &lt;your-license-filename&gt;",
  "readme": "NativeScript Application",
  "repository": "&lt;fill-your-repository-here&gt;",
  "nativescript": {
    "id": "org.nativescript.myApp",
    "tns-android": {
      "version": "4.1.3"
    }
  },
  "scripts": {
    "lint": "tslint \"app/**/*.ts\""
  },
  "dependencies": {
    "@angular/animations": "^6.0.9",
    "@angular/common": "^6.0.9",
    "@angular/compiler": "^6.0.9",
    "@angular/core": "^6.0.9",
    "@angular/forms": "^6.0.9",
    "@angular/http": "^6.0.9",
    "@angular/platform-browser": "^6.0.9",
    "@angular/platform-browser-dynamic": "^6.0.9",
    "@angular/router": "^6.0.9",
    "nativescript-angular": "~6.0.0",
    "nativescript-camera": "^4.0.2",
    "nativescript-drop-down": "^4.0.1",
    "nativescript-modal-datetimepicker": "^1.1.4",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-toast": "^1.4.6",
    "nativescript-ui-listview": "^3.8.0",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~6.1.0",
    "tns-core-modules": "^4.2.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular-devkit/core": "~0.6.3",
    "@angular/compiler-cli": "^6.0.9",
    "@ngtools/webpack": "~6.0.3",
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "clean-webpack-plugin": "~0.1.19",
    "codelyzer": "~4.3.0",
    "copy-webpack-plugin": "~4.5.1",
    "css-loader": "~0.28.11",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "~1.6.0",
    "nativescript-dev-typescript": "^0.7.3",
    "nativescript-dev-webpack": "~0.12.0",
    "nativescript-worker-loader": "~0.9.0",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.3.0",
    "sass-loader": "~7.0.1",
    "tslint": "~5.10.0",
    "typescript": "~2.7.2",
    "uglifyjs-webpack-plugin": "~1.2.5",
    "webpack": "~4.6.0",
    "webpack-bundle-analyzer": "~2.13.0",
    "webpack-cli": "~2.1.3",
    "webpack-sources": "~1.1.0"
  }
    }
  </code></pre>
  
  <p>Thanks.</p>
  
  <p>==========================
  UPDATE 2018-11-13 15:01</p>
  
  <p>@Narendra Mongiya I have added this onItemTap simple function but I still get the error page when I tap the RadListView. No console.log and no alert are generated. </p>
  
  <p>Template:</p>
  
  <pre><code>    &lt;RadListView #optionsListView selectionBehavior="Press" (loaded)="onListLoaded()" [items]="reports" (itemTap)="onItemTap($event)"&gt;
          &lt;ng-template tkListItemTemplate let-item="item"&gt;
          &lt;StackLayout class="itemTemplateStackLayout" orientation="vertical"&gt;
                  &lt;StackLayout class="reportStackLayout" orientation="vertical"&gt;                           
                      &lt;Label class="labelName blue_text bold_text list-group-item" [text]="item.report_name"&gt;&lt;/Label&gt;                        
                      &lt;GridLayout class="reportDetailsGridLayout" columns="*, *"&gt;
                          &lt;Label row="0" col="0" horizontalAlignment="left" [class]="item.status_class" class="labelStatus"  [text]="item.status_text" textWrap="true"&gt;&lt;/Label&gt;
                          &lt;Label row="0" col="1" horizontalAlignment="right" class="labelValue green_text bold_text" [text]="item.report_value" textWrap="true"&gt;&lt;/Label&gt;
                      &lt;/GridLayout&gt;
                  &lt;/StackLayout&gt;
          &lt;/StackLayout&gt;
      &lt;/ng-template&gt;         
  &lt;/RadListView&gt;
  </code></pre>
  
  <p>onItemTap in component:</p>
  
  <pre><code>    public onItemTap(){
      console.log("onItemTap called");
      alert("ItemTap event");
  }
  </code></pre>
  
  <p>Any ideas? Thanks.</p>
  
  <p>========================== UPDATE 2018-11-15 17:31</p>
  
  <p>Another simpler RadListView that displays a list of books:</p>
  
  <p>Component:</p>
  
  <pre><code>public getBooks(args: ListViewEventData) {
  
      this._books = new ObservableArray&lt;Book&gt;();
      for (let i = 0; i &lt; 10; i++) {
          this._books.push(new Book("The Adventures of Tom Sawyer", "Mark Twain"));
      }
      this.isLoading=false;            
  }    
  public get books(): ObservableArray&lt;Book&gt; {
      return this._books;
  }   
  </code></pre>
  
  <p>And the template:</p>
  
  <pre><code>&lt;RadListView [items]="books" (loaded)="getBooks($event)"&gt;
  &lt;ng-template tkListItemTemplate let-item="item"&gt;
  &lt;StackLayout class="itemTemplateStackLayout" orientation="vertical"&gt;
          &lt;StackLayout class="reportStackLayout" orientation="vertical"&gt;
  
              &lt;Label class="labelName blue_text bold_text list-group-item" [text]="item.title"&gt;&lt;/Label&gt;
  
              &lt;GridLayout class="reportDetailsGridLayout" columns="*, *"&gt;
                  &lt;Label row="0" col="0" horizontalAlignment="left" [class]="item.author" class="labelStatus"  [text]="item.author" textWrap="true"&gt;&lt;/Label&gt;
  
              &lt;/GridLayout&gt;
          &lt;/StackLayout&gt;
  &lt;/StackLayout&gt;
  &lt;/ng-template&gt;         
  </code></pre>
  
  <p></p>
  
  <p>Tapping on the list takes me to the same error screen:</p>
  
  <pre><code>    An uncaught Exception occurred on "main" thread.
  com.tns.NativeScriptException: 
  Calling js method onItemClick failed
  
  TypeError: listView._listViewAdapter.isGroupHeader is not a function
  File: "file:///data/data/org.nativescript.myApp/files/app/tns_modules/nativescript-ui-listview/ui-listview.js, line: 539, column: 62
  
  StackTrace: 
  Frame: function:'onItemClick', file:'file:///data/data/org.nativescript.myApp/files/app/tns_modules/nativescript-ui-listview/ui-listview.js', line: 539, column: 63
  
  
  at com.tns.Runtime.callJSMethodNative(Native Method)
  at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)....etc.
  </code></pre>
  
  <p>I'm at wits end as to what it could be. Couldn't be simpler.</p>