1. Home
  2. Forum
  3. Ionic
  4. How to display the product list with their images in listview

How to display the product list with their images in listview

Hello!
I am working on an eCommerce project in which I want to display the product list with their perspective images in list view

1 Reply 1 reply marked as answer
MK Muthukrishnan Kandasamy Syncfusion Team December 18, 2020 10:02 AM UTC

 
Hi Ishan, 
 
Thanks for contacting Syncfusion support. 
 
We can show the products list with image by using EJ ListView control. We can use the custom template for achieving this requirement. Please refer to the below code block. 
 
[Index.html] 
 
<body ng-app="starter"> 
    <ion-pane> 
        <ion-header-bar class="bar-stable"> 
          <h1 class="title">Ionic - Teste DataBase</h1> 
        </ion-header-bar> 
             <ion-content ng-controller="ListController"> 
            <div class="angularbind ioncenter"> 
                <div ej-listview id="anglistview" e-datasource="datalist" e-width="400" style="margin:0 auto" e-databinding="true" e-rendertemplate="true" e-showheader="false" e-allowscrolling="false"> 
                    <div class="cont-bg"> 
                        <div class="{{>Class}}"> 
                        </div> 
                        <div class="listrightdiv"> 
                            <span class="templatetext">{{>Name}}</span> <span class="designationstyle">{{>Designation}}</span> 
                            <div class="aboutstyle"> 
                                {{>About}} 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </ion-content> 
        <ion-list> 
 
        </ion-list> 
    </ion-pane> 
</body> 
 
 
[app.js] 
 
example.controller("ListController", function($scope, $rootScope) { 
  $scope.datalist = [ 
    { "Name": "Brooke", "Class": "brooke", "Designation": "HR Assistant", "About": "Brooke provides administrative support to the HR office." }, 
  { "Name": "Claire", "Class": "claire", "Designation": "HR Manager", "About": "Claire is responsible for strategic HR planning and budget." }, 
  { "Name": "Erik", "Class": "erik", "Designation": "Training Specialist", "About": "Erik notifies attendees and manages follow up." }, 
  { "Name": "Grace", "Class": "grace", "Designation": "Development Manager", "About": "Grace maintains training plans to achive workforce skill." }, 
  { "Name": "Jacob", "Class": "jacob", "Designation": "Recruitment Manager", "About": "Jacob manages recruitment and prepares key staffing metrics." }]; 
}); 
 
 
 
We have prepared sample application for your convenience, which can be downloaded from the below link. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 



Marked as answer
Loader.
Up arrow icon