Add image to nested list

[Erik]

Hello,

i would like to add images to the lines of my nested list view.

Looking at your demo https://ej2.syncfusion.com/aspnetcore/ListView/NestedList#/material, i see i can use icon, but i simply want to add images without using styling.

Thanks

Erik

[Christopher Issac Sunder K]

Hi Erik, 

 

Greetings from Syncfusion support. 

 

Instead of CSS styling, you can make use of templates to display the image/icon in the list item. In the template, we need to have img tag and use the image path in the src attribute. Here is some code snippet for your reference, 

 

@using Syncfusion.EJ2 

@section ControlsSection{ 

    @{ var template = "<div ${if(category!==null)} class = 'clearfix desc e-list-wrapper e-list-multi-line e-list-avatar' ${else} " 

      + "class = 'clearfix e-list-wrapper e-list-multi-line e-list-avatar' ${/if}> ${if(imgSrc!=='')} <img class='e-avatar' src=${imgSrc} />" 

      + "${/if} <span class='e-list-item-header'>${title} </span>" 

      + "<span class='e-list-content e-text-overflow' >${description} </span> ${if(timeStamp!=='')}  <div id='list-logo'>" 

      + "<span class='bookmark'></span> <span class='comments'></span>" 

      + "<span class='share'></span></div> <div class='timeStamp'>" 

      + "${timeStamp} </div> ${/if} </div>";} 

    <div class="control-section"> 

        <ejs-listview enable="true" id="listview_template" dataSource="ViewBag.dataSource" cssClass="e-list-template" 

                      headerTitle="Syncfusion Blog" template=@template showHeader="true" actionComplete="onComplete"> 

        </ejs-listview> 

    </div> 

} 

 

Please check with below online sample for reference, 

https://ej2.syncfusion.com/aspnetcore/ListView/Templates#/material 

Please get back to us if you require any further assistance. 

 

Thanks, 

Christo