ListView templating

[Alexandru Boboc]

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]

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: 

 

http://www.syncfusion.com/downloads/support/forum/130012/ze/systemjs.config1683215226 

 

Please let us know if you need any further assistance. 

 

Regards, 

 

Selvamani S. 

[Alexandru Boboc]

Thank you, that works.

Have a great day!

[Selvamani Sankarappan]

Hi Alexandru, 

 

Thanks for the update. 

 

Please let us know if you need any further assistance. 

 

Regards, 

 

Selvamani S.