Integrate avatar into ListView

19 Dec 20226 minutes to read

Avatar is integrated into the listview to create contacts applications. The xsmall size avatar is used to match the size of the list item. Letters and images are also used as avatar content.

CSHTML

@using Syncfusion.EJ2
<div class="col-lg-12 control-section">

    <div class="sample_container">
        <!-- Listview element -->
        @{ var template = "<div class='listWrapper'>" +
            "${if(avatar!=='')}" +
            "<span class='e-avatar e-avatar-small e-avatar-circle'>${avatar}</span>" +
            "${else}" +
            "<span class='${pic} e-avatar e-avatar-small e-avatar-circle'> </span>" +
            "${/if}" +
            "<span class='text'>" +
            "${text} </span> </div>";}
        @Html.EJS().ListView("letterAvatarList").Enable(true).DataSource((IEnumerable<object>)ViewBag.dataSource).HeaderTitle("Contacts").ShowHeader(true).Template(template).SortOrder(Syncfusion.EJ2.Lists.SortOrder.Ascending).Render()
    </div>
</div>


<style>
    .control-section {
        overflow: auto;
    }

    /* Listview Customization */

    #letterAvatarList {
        max-width: 350px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

        #letterAvatarList .listWrapper {
            width: inherit;
            height: inherit;
            position: relative;
        }

        #letterAvatarList .e-list-header {
            height: 54px;
        }

    .material #letterAvatarList .e-list-header .e-text {
        line-height: 22px;
    }

    .fabric #letterAvatarList .e-list-header .e-text {
        line-height: 22px;
    }

    .bootstrap #letterAvatarList .e-list-header .e-text {
        line-height: 13px;
    }

    .highcontrast #letterAvatarList .e-list-header .e-text {
        line-height: 20px;
    }

    #letterAvatarList .e-list-item {
        cursor: pointer;
        height: 50px;
        line-height: 44px;
        border: 0;
    }

    /* Badge Positioning */

    #letterAvatarList .e-badge {
        margin-top: 12px;
    }

    #letterAvatarList .listWrapper .text {
        width: 60%;
        display: inline-block;
        vertical-align: middle;
        margin: 0 50px;
    }

    /* Avatar Positioning */

    #letterAvatarList .listWrapper .e-avatar {
        position: absolute;
        top: calc(100% - 40px);
        font-size: 10px;
        left: 5px;
    }

    /* Avatar Background Customization */

    #letterAvatarList .e-list-item:nth-child(1) .e-avatar {
        background-color: #039BE5;
    }

    #letterAvatarList .e-list-item:nth-child(3) .e-avatar {
        background-color: #E91E63;
    }

    #letterAvatarList .e-list-item:nth-child(5) .e-avatar {
        background-color: #009688;
    }

    /* Avatar images using 'background-image' property */

    .pic01 {
        background-image: url('./pic01.png');
    }

    .pic02 {
        background-image: url('./pic02.png');
    }

    .pic03 {
        background-image: url('./pic03.png');
    }

    .pic04 {
        background-image: url('./pic04.png');
    }
</style>

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace EJ2MVCSampleBrowser.Controllers.Avatar
{
    public partial class AvatarController : Controller
    {
        public ActionResult Listview()
        {
            List<object> data = new List<object>();
            data.Add(new { text = "Robert", id = "s_01", avatar= "", pic= "pic04" });
            data.Add(new { text = "Nancy", id = "s_02", avatar= "N", pic= "" });
            data.Add(new { text = "John", id = "s_03", pic= "pic01", avatar= "" });
            data.Add(new { text = "Andrew", id = "s_04", avatar= "A", pic= "" });
            data.Add(new { text = "Michael", id = "s_05", pic= "pic02", avatar= "" });
            data.Add(new { text = "Steven", id = "s_06", pic= "pic03", avatar= "" });
            data.Add(new { text = "Margaret", id = "s_07", avatar= "M", pic= "" });
            ViewBag.dataSource = data;
            return View();
        }
    }

}

NOTE

View Sample in GitHub.