We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ListView templating

Thread ID:





130012 Apr 14,2017 09:10 AM Apr 20,2017 12:52 AM Angular 3
Tags: ejListView
Alexandru Boboc
Asked On April 14, 2017 09:10 AM

Hi guys,

I'm trying to use ListView and it works with the default settings, but I need to render custom html in each list item.

I took a look at the ListView code on GitHub and apparently this isn't yet implemented, as the "template" property is not added to the Inputs object to be "angularized".
For comparison, see the same "template" property added for the ListBox component, which works with templates.

Any idea how to customize the output in each list item to include custom html?



Selvamani Sankarappan [Syncfusion]
Replied On April 17, 2017 07:13 AM

Hi Alexandru, 
Thanks for using Syncfusion products. 
You can achieve the template support for ListView component using JS render template. Refer to the following code example: 
<script id="template" type="text/x-jsrender"> 
        <div class="cont-bg"> 
            <div class="{{>Class}}"> 
            <div class="listrightdiv"> 
                <span class="templatetext">{{>Name}}</span> <span class="designationstyle">{{>Designation}}</span> 
                <div class="aboutstyle"> 
<div style="margin-top:20px;margin-left:10px;"> 
    <ej-listview [dataSource]="data" renderTemplate="true" templateId="template"> 
export class AppComponent { 
    data: any; 
  constructor() { 
        this.data = [{ "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." }]; 
Refer to the following sample: 
Please let us know if you need any further assistance. 
Selvamani S. 

Alexandru Boboc
Replied On April 19, 2017 02:57 PM

Thank you, that works.

Have a great day!

Selvamani Sankarappan [Syncfusion]
Replied On April 20, 2017 12:52 AM

Hi Alexandru, 
Thanks for the update. 
Please let us know if you need any further assistance. 
Selvamani S. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon