From 0b60a715f5f774a76a1891ba90a39fbd4a766244 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87a=C4=9Fatay=20=C3=87ivici?=
 <cagatay.civici@github.com>
Date: Thu, 21 Jul 2016 23:28:02 +0300
Subject: [PATCH] #572 for DataScroller

---
 components/datascroller/datascroller.ts       |  8 +-
 .../demo/datascroller/datascrollerdemo.html   | 67 +++++++-------
 .../datascrollerinfinitedemo.html             | 88 +++++++++----------
 .../datascroller/datascrollerinlinedemo.html  | 88 +++++++++----------
 .../datascroller/datascrollerloaderdemo.html  | 88 +++++++++----------
 5 files changed, 163 insertions(+), 176 deletions(-)

diff --git a/components/datascroller/datascroller.ts b/components/datascroller/datascroller.ts
index f3e295d4fa7..e398b9b5d2a 100644
--- a/components/datascroller/datascroller.ts
+++ b/components/datascroller/datascroller.ts
@@ -2,6 +2,7 @@ import {Component,ElementRef,AfterViewInit,OnDestroy,DoCheck,Input,Output,Render
 import {Header} from '../common';
 import {Footer} from '../common';
 import {DomHandler} from '../dom/domhandler';
+import {TemplateWrapper} from '../common';
 
 @Component({
     selector: 'p-dataScroller',
@@ -12,7 +13,9 @@ import {DomHandler} from '../dom/domhandler';
         </div>
         <div class="ui-datascroller-content ui-widget-content" [ngStyle]="{'max-height': scrollHeight}">
             <ul class="ui-datascroller-list">
-                <template ngFor [ngForOf]="dataToRender" [ngForTemplate]="itemTemplate"></template>
+                <li *ngFor="let item of dataToRender">
+                    <template [pTemplateWrapper]="itemTemplate" [item]="item"></template>
+                </li>
             </ul>
         </div>
         <div class="ui-datascroller-footer ui-widget-header ui-corner-bottom" *ngIf="footer">
@@ -20,7 +23,8 @@ import {DomHandler} from '../dom/domhandler';
         </div>
     </div>
     `,
-    providers: [DomHandler]
+    providers: [DomHandler],
+    directives: [TemplateWrapper]
 })
 export class DataScroller implements AfterViewInit,DoCheck,OnDestroy {
 
diff --git a/showcase/demo/datascroller/datascrollerdemo.html b/showcase/demo/datascroller/datascrollerdemo.html
index 2d3eb3b8ffe..b32af506837 100644
--- a/showcase/demo/datascroller/datascrollerdemo.html
+++ b/showcase/demo/datascroller/datascrollerdemo.html
@@ -79,7 +79,12 @@ <h3>Import</h3>
 </pre>
 
             <h3>Getting Started</h3>
-            <p>DataScroller requires a collection of items as its value, number of rows to load and a template to display each item. Template should contain a li element as a wrapper. </p><p>Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the datascroller. Cars are loaded by a CarService that connects to a server to fetch the cars with a Promise.</p>
+            <p>DataScroller requires a collection of items as its value, number of rows to load and a template content to display
+                    where each item can be accessed using the implicit variable.</p>
+                    
+            <p>Throughout the samples, a car interface having vin, brand, year and color properties are used 
+                to define an object to be displayed by the datascroller. Cars are loaded by a CarService that 
+                connects to a server to fetch the cars with a Promise.</p>
 <pre>
 <code class="language-typescript" pCode>
 export interface Car {
@@ -132,9 +137,7 @@ <h3>Getting Started</h3>
 <code class="language-markup" pCode>
 &lt;p-dataScroller [value]="cars" [rows]="10"&gt;
     &lt;template let-car&gt;
-        &lt;li&gt;
-            Car content
-        &lt;/li&gt;
+        Car content
     &lt;/template&gt;
 &lt;/p-dataScroller&gt;
 </code>
@@ -154,9 +157,7 @@ <h3>Facets</h3>
     &lt;header&gt;List of Cars&lt;/header&gt;
     &lt;footer&gt;Choose from the list.&lt;/footer&gt;
     &lt;template let-car&gt;
-        &lt;li&gt;
-            Car content
-        &lt;/li&gt;
+        Car content
     &lt;/template&gt;
 &lt;/p-dataScroller&gt;
 </code>
@@ -168,9 +169,7 @@ <h3>Inline</h3>
 <code class="language-markup" pCode>
 &lt;p-dataScroller [value]="cars" [inline]="true" [rows]="10"&gt;
     &lt;template let-car&gt;
-        &lt;li&gt;
-            Car content
-        &lt;/li&gt;
+        Car content
     &lt;/template&gt;
 &lt;/p-dataScroller&gt;
 </code>
@@ -185,9 +184,7 @@ <h3>Lazy Loading</h3>
 <code class="language-markup" pCode>
 &lt;p-dataScroller [value]="cars" [rows]="10" [lazy]="true" (onLazyLoad)="loadData($event)"&gt;
     &lt;template let-car&gt;
-        &lt;li&gt;
-            Car content
-        &lt;/li&gt;
+        Car content
     &lt;/template&gt;
 &lt;/p-dataScroller&gt;
 </code>
@@ -329,33 +326,31 @@ <h3>Dependencies</h3>
         Scroll Down to to Load More
     &lt;/header&gt;
     &lt;template let-car&gt;
-        &lt;li style="border-bottom:1px solid #D5D5D5;"&gt;
-            &lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px"&gt;
-                &lt;div class="ui-grid-row"&gt;
-                    &lt;div class="ui-grid-col-3" style="text-align:center"&gt;&lt;i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"&gt;&lt;/i&gt;&lt;img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"&gt;&lt;/div&gt;
-                    &lt;div class="ui-grid-col-9"&gt;
-                        &lt;div class="ui-grid ui-grid-responsive ui-fluid"&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Vin: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
-                            &lt;/div&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Year: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
-                            &lt;/div&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Brand: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
-                            &lt;/div&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Color: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
-                            &lt;/div&gt;
+        &lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5;"&gt;
+            &lt;div class="ui-grid-row"&gt;
+                &lt;div class="ui-grid-col-3" style="text-align:center"&gt;&lt;i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"&gt;&lt;/i&gt;&lt;img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"&gt;&lt;/div&gt;
+                &lt;div class="ui-grid-col-9"&gt;
+                    &lt;div class="ui-grid ui-grid-responsive ui-fluid"&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Vin: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Year: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Brand: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Color: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
                         &lt;/div&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
-        &lt;/li&gt;
+        &lt;/div&gt;
     &lt;/template&gt;
 &lt;/p-dataScroller&gt;
 
diff --git a/showcase/demo/datascroller/datascrollerinfinitedemo.html b/showcase/demo/datascroller/datascrollerinfinitedemo.html
index d05514e0ff1..6b201a643db 100644
--- a/showcase/demo/datascroller/datascrollerinfinitedemo.html
+++ b/showcase/demo/datascroller/datascrollerinfinitedemo.html
@@ -51,33 +51,31 @@
         Scroll Down to to Load More
     &lt;/header&gt;
     &lt;template let-car&gt;
-        &lt;li style="border-bottom:1px solid #D5D5D5;"&gt;
-            &lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px"&gt;
-                &lt;div class="ui-grid-row"&gt;
-                    &lt;div class="ui-grid-col-3" style="text-align:center"&gt;&lt;img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"&gt;&lt;/div&gt;
-                    &lt;div class="ui-grid-col-9"&gt;
-                        &lt;div class="ui-grid ui-grid-responsive ui-fluid"&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Vin: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
-                            &lt;/div&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Year: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
-                            &lt;/div&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Brand: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
-                            &lt;/div&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Color: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
-                            &lt;/div&gt;
+        &lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5"&gt;
+            &lt;div class="ui-grid-row"&gt;
+                &lt;div class="ui-grid-col-3" style="text-align:center"&gt;&lt;img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"&gt;&lt;/div&gt;
+                &lt;div class="ui-grid-col-9"&gt;
+                    &lt;div class="ui-grid ui-grid-responsive ui-fluid"&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Vin: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Year: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Brand: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Color: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
                         &lt;/div&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
-        &lt;/li&gt;
+        &lt;/div&gt;
     &lt;/template&gt;
 &lt;/p-dataScroller&gt;
 </code>
@@ -94,33 +92,31 @@
             Scroll Down to to Load More
         </header>
         <template let-car>
-            <li style="border-bottom:1px solid #D5D5D5;">
-                <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
-                    <div class="ui-grid-row">
-                        <div class="ui-grid-col-3" style="text-align:center"><img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"></div>
-                        <div class="ui-grid-col-9">
-                            <div class="ui-grid ui-grid-responsive ui-fluid">
-                                <div class="ui-grid-row">
-                                    <div class="ui-grid-col-2">Vin: </div>
-                                    <div class="ui-grid-col-10">{{car.vin}}</div>
-                                </div>
-                                <div class="ui-grid-row">
-                                    <div class="ui-grid-col-2">Year: </div>
-                                    <div class="ui-grid-col-10">{{car.year}}</div>
-                                </div>
-                                <div class="ui-grid-row">
-                                    <div class="ui-grid-col-2">Brand: </div>
-                                    <div class="ui-grid-col-10">{{car.brand}}</div>
-                                </div>
-                                <div class="ui-grid-row">
-                                    <div class="ui-grid-col-2">Color: </div>
-                                    <div class="ui-grid-col-10">{{car.color}}</div>
-                                </div>
+            <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5">
+                <div class="ui-grid-row">
+                    <div class="ui-grid-col-3" style="text-align:center"><img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"></div>
+                    <div class="ui-grid-col-9">
+                        <div class="ui-grid ui-grid-responsive ui-fluid">
+                            <div class="ui-grid-row">
+                                <div class="ui-grid-col-2">Vin: </div>
+                                <div class="ui-grid-col-10">{{car.vin}}</div>
+                            </div>
+                            <div class="ui-grid-row">
+                                <div class="ui-grid-col-2">Year: </div>
+                                <div class="ui-grid-col-10">{{car.year}}</div>
+                            </div>
+                            <div class="ui-grid-row">
+                                <div class="ui-grid-col-2">Brand: </div>
+                                <div class="ui-grid-col-10">{{car.brand}}</div>
+                            </div>
+                            <div class="ui-grid-row">
+                                <div class="ui-grid-col-2">Color: </div>
+                                <div class="ui-grid-col-10">{{car.color}}</div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </li>
+            </div>
         </template>
     </p-dataScroller>
 </div>
\ No newline at end of file
diff --git a/showcase/demo/datascroller/datascrollerinlinedemo.html b/showcase/demo/datascroller/datascrollerinlinedemo.html
index 32306161405..bc09a0ba3ea 100644
--- a/showcase/demo/datascroller/datascrollerinlinedemo.html
+++ b/showcase/demo/datascroller/datascrollerinlinedemo.html
@@ -13,33 +13,31 @@
             Scroll Down to to Load More
         </header>
         <template let-car>
-            <li style="border-bottom:1px solid #D5D5D5;">
-                <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
-                    <div class="ui-grid-row">
-                        <div class="ui-grid-col-3" style="text-align:center"><i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"></i><img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"></div>
-                        <div class="ui-grid-col-9">
-                            <div class="ui-grid ui-grid-responsive ui-fluid">
-                                <div class="ui-grid-row">
-                                    <div class="ui-grid-col-2">Vin: </div>
-                                    <div class="ui-grid-col-10">{{car.vin}}</div>
-                                </div>
-                                <div class="ui-grid-row">
-                                    <div class="ui-grid-col-2">Year: </div>
-                                    <div class="ui-grid-col-10">{{car.year}}</div>
-                                </div>
-                                <div class="ui-grid-row">
-                                    <div class="ui-grid-col-2">Brand: </div>
-                                    <div class="ui-grid-col-10">{{car.brand}}</div>
-                                </div>
-                                <div class="ui-grid-row">
-                                    <div class="ui-grid-col-2">Color: </div>
-                                    <div class="ui-grid-col-10">{{car.color}}</div>
-                                </div>
+            <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5;">
+                <div class="ui-grid-row">
+                    <div class="ui-grid-col-3" style="text-align:center"><i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"></i><img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"></div>
+                    <div class="ui-grid-col-9">
+                        <div class="ui-grid ui-grid-responsive ui-fluid">
+                            <div class="ui-grid-row">
+                                <div class="ui-grid-col-2">Vin: </div>
+                                <div class="ui-grid-col-10">{{car.vin}}</div>
+                            </div>
+                            <div class="ui-grid-row">
+                                <div class="ui-grid-col-2">Year: </div>
+                                <div class="ui-grid-col-10">{{car.year}}</div>
+                            </div>
+                            <div class="ui-grid-row">
+                                <div class="ui-grid-col-2">Brand: </div>
+                                <div class="ui-grid-col-10">{{car.brand}}</div>
+                            </div>
+                            <div class="ui-grid-row">
+                                <div class="ui-grid-col-2">Color: </div>
+                                <div class="ui-grid-col-10">{{car.color}}</div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </li>
+            </div>
         </template>
     </p-dataScroller>
         
@@ -108,33 +106,31 @@
         Scroll Down to to Load More
     &lt;/header&gt;
     &lt;template let-car&gt;
-        &lt;li style="border-bottom:1px solid #D5D5D5;"&gt;
-            &lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px"&gt;
-                &lt;div class="ui-grid-row"&gt;
-                    &lt;div class="ui-grid-col-3" style="text-align:center"&gt;&lt;i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"&gt;&lt;/i&gt;&lt;img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"&gt;&lt;/div&gt;
-                    &lt;div class="ui-grid-col-9"&gt;
-                        &lt;div class="ui-grid ui-grid-responsive ui-fluid"&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Vin: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
-                            &lt;/div&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Year: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
-                            &lt;/div&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Brand: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
-                            &lt;/div&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Color: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
-                            &lt;/div&gt;
+        &lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5"&gt;
+            &lt;div class="ui-grid-row"&gt;
+                &lt;div class="ui-grid-col-3" style="text-align:center"&gt;&lt;i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"&gt;&lt;/i&gt;&lt;img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"&gt;&lt;/div&gt;
+                &lt;div class="ui-grid-col-9"&gt;
+                    &lt;div class="ui-grid ui-grid-responsive ui-fluid"&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Vin: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Year: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Brand: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Color: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
                         &lt;/div&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
-        &lt;/li&gt;
+        &lt;/div&gt;
     &lt;/template&gt;
 &lt;/p-dataScroller&gt;
     
diff --git a/showcase/demo/datascroller/datascrollerloaderdemo.html b/showcase/demo/datascroller/datascrollerloaderdemo.html
index 59de9c5285b..7db8c612ff4 100644
--- a/showcase/demo/datascroller/datascrollerloaderdemo.html
+++ b/showcase/demo/datascroller/datascrollerloaderdemo.html
@@ -13,33 +13,31 @@
             Click Load Button at Footer to Load More
         </header>
         <template let-car>
-            <li style="border-bottom:1px solid #D5D5D5;">
-                <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
-                    <div class="ui-grid-row">
-                        <div class="ui-grid-col-3" style="text-align:center"><i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"></i><img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"></div>
-                        <div class="ui-grid-col-9">
-                            <div class="ui-grid ui-grid-responsive ui-fluid">
-                                <div class="ui-grid-row">
-                                    <div class="ui-grid-col-2">Vin: </div>
-                                    <div class="ui-grid-col-10">{{car.vin}}</div>
-                                </div>
-                                <div class="ui-grid-row">
-                                    <div class="ui-grid-col-2">Year: </div>
-                                    <div class="ui-grid-col-10">{{car.year}}</div>
-                                </div>
-                                <div class="ui-grid-row">
-                                    <div class="ui-grid-col-2">Brand: </div>
-                                    <div class="ui-grid-col-10">{{car.brand}}</div>
-                                </div>
-                                <div class="ui-grid-row">
-                                    <div class="ui-grid-col-2">Color: </div>
-                                    <div class="ui-grid-col-10">{{car.color}}</div>
-                                </div>
+            <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5">
+                <div class="ui-grid-row">
+                    <div class="ui-grid-col-3" style="text-align:center"><i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"></i><img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"></div>
+                    <div class="ui-grid-col-9">
+                        <div class="ui-grid ui-grid-responsive ui-fluid">
+                            <div class="ui-grid-row">
+                                <div class="ui-grid-col-2">Vin: </div>
+                                <div class="ui-grid-col-10">{{car.vin}}</div>
+                            </div>
+                            <div class="ui-grid-row">
+                                <div class="ui-grid-col-2">Year: </div>
+                                <div class="ui-grid-col-10">{{car.year}}</div>
+                            </div>
+                            <div class="ui-grid-row">
+                                <div class="ui-grid-col-2">Brand: </div>
+                                <div class="ui-grid-col-10">{{car.brand}}</div>
+                            </div>
+                            <div class="ui-grid-row">
+                                <div class="ui-grid-col-2">Color: </div>
+                                <div class="ui-grid-col-10">{{car.color}}</div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </li>
+            </div>
         </template>
         <footer>
             <button #loadButton type="text" icon="fa-refresh" pButton label="Load"></button>
@@ -111,33 +109,31 @@
         Click Load Button at Footer to Load More
     &lt;/header&gt;
     &lt;template let-car&gt;
-        &lt;li style="border-bottom:1px solid #D5D5D5;"&gt;
-            &lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px"&gt;
-                &lt;div class="ui-grid-row"&gt;
-                    &lt;div class="ui-grid-col-3" style="text-align:center"&gt;&lt;i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"&gt;&lt;/i&gt;&lt;img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"&gt;&lt;/div&gt;
-                    &lt;div class="ui-grid-col-9"&gt;
-                        &lt;div class="ui-grid ui-grid-responsive ui-fluid"&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Vin: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
-                            &lt;/div&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Year: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
-                            &lt;/div&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Brand: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
-                            &lt;/div&gt;
-                            &lt;div class="ui-grid-row"&gt;
-                                &lt;div class="ui-grid-col-2"&gt;Color: &lt;/div&gt;
-                                &lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
-                            &lt;/div&gt;
+        &lt;div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5"&gt;
+            &lt;div class="ui-grid-row"&gt;
+                &lt;div class="ui-grid-col-3" style="text-align:center"&gt;&lt;i class="fa fa-search" (click)="selectCar(car)" style="cursor:pointer;float:left;margin-top:40px"&gt;&lt;/i&gt;&lt;img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif"&gt;&lt;/div&gt;
+                &lt;div class="ui-grid-col-9"&gt;
+                    &lt;div class="ui-grid ui-grid-responsive ui-fluid"&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Vin: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.vin}}&lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Year: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.year}}&lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Brand: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.brand}}&lt;/div&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-grid-row"&gt;
+                            &lt;div class="ui-grid-col-2"&gt;Color: &lt;/div&gt;
+                            &lt;div class="ui-grid-col-10"&gt;{{car.color}}&lt;/div&gt;
                         &lt;/div&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
-        &lt;/li&gt;
+        &lt;/div&gt;
     &lt;/template&gt;
     &lt;footer&gt;
         &lt;button #loadButton type="text" icon="fa-refresh" pButton label="Load"&gt;&lt;/button&gt;