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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ListView templating

Thread ID:

Created:

Updated:

Platform:

Replies:

130012 Apr 14,2017 01:10 PM UTC Apr 20,2017 04:52 AM UTC Angular 3
loading
Tags: ejListView
Alexandru Boboc
Asked On April 14, 2017 01:10 PM UTC

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?

Thanks, 

Alex

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

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: 
 
[index.html] 
<script id="template" type="text/x-jsrender"> 
        <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> 
    </script> 
 
[app.component.html] 
 
<div style="margin-top:20px;margin-left:10px;"> 
    <ej-listview [dataSource]="data" renderTemplate="true" templateId="template"> 
    </ej-listview> 
    
</div> 
 
[app.component.ts] 
 
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. 
 
Regards, 
 
Selvamani S. 


Alexandru Boboc
Replied On April 19, 2017 06:57 PM UTC

Thank you, that works.

Have a great day!

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

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


CONFIRMATION

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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

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

;