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.
@{ 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>";}
<div class="col-lg-12 control-section">
<ejs-listview id='letterAvatarList' dataSource=@ViewBag.dataSource headerTitle='Contacts' template="@template" showHeader=true sortOrder="Ascending">
</ejs-listview>
</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('./../css/avatar/images/pic01.png');
}
.pic02 {
background-image: url('./../css/avatar/images/pic02.png');
}
.pic03 {
background-image: url('./../css/avatar/images/pic03.png');
}
.pic04 {
background-image: url('./../css/avatar/images/pic04.png');
}
</style>
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();
}
}
}
Output be like the below.