You can customize the ListView using the
template property. Refer
to the following steps to customize ListView as mobile contact view with our ej2-avatar
.
List<object> listdata = new List<object>();
listdata.Add(new
{
text = "Jenifer",
contact = "(206) 555-985774",
id = "1",
avatar = "",
pic = "pic01"
});
listdata.Add(new
{
text = "Amenda",
contact = "(206) 555-3412",
id = "2",
avatar = "A",
pic = ""
});
avatar
classes in ListView template to customize contact icon. In the following codes, medium size avatar has been
set using the class name e-avatar e-avatar-circle
from data source. var template: "<div class='settings'>" +
"${if(avatar!=='')}" +
"<span class='e-avatar e-avatar-circle'>${avatar}</span>" +
"${else}" +
"<span class='${pic} e-avatar e-avatar-circle'> </span>" +
"${/if}" +
"<div id='content'>" +
"<div class='name'>${text}</div>" +
"<div id='info'>${contact}</div>" +
"</div>";
Avatars can be set in different sizes in avatar classes. To know more about avatar classes, refer to Avatar.
sortOder
property of ListView.showHeader
property, and set the
headerTitle
as Contacts
.@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists;
@{
var template = "<div class='settings'>" +
"${if(avatar!=='')}" +
"<span class='e-avatar e-avatar-circle'>${avatar}</span>" +
"${else}" +
"<span class='${pic} e-avatar e-avatar-circle'> </span>" +
"${/if}" +
"<div id='content'>" +
"<div class='name'>${text}</div>" +
"<div id='info'>${contact}</div>" +
"</div>";
}
<!-- ListView element -->
<ejs-listview id="List" dataSource="(IEnumerable<object>)ViewBag.dataSource" sortOrder="Ascending" template="@template" showHeader="true" headerTitle="Contacts">
<e-listview-fieldsettings text="Name"></e-listview-fieldsettings>
</ejs-listview>
<style>
#List {
margin: 0 auto;
border: 1px solid #ccc;
}
#List .e-list-item {
height: 60px;
cursor: pointer;
}
#List .e-list-header .e-text {
font-family: sans-serif;
font-size: 18px;
line-height: 16px;
}
#List #content {
margin: 0;
}
#List .e-list-header {
background: rgb(2, 120, 215);
color: white;
}
#List #info,
#List .name {
font-size: 14px;
margin: 0 60px;
line-height: 20px;
}
#List .name {
padding-top: 8px;
font-weight: 500;
}
.pic01 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/1.png");
}
.pic02 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/3.png");
}
.pic03 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/5.png");
}
.pic04 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/2.png");
}
#List .e-avatar {
position: absolute;
margin-top: 8px;
font-size: 14px;
}
#List .e-list-item:nth-child(1) .e-avatar {
background-color: #039be5;
}
#List .e-list-item:nth-child(2) .e-avatar {
background-color: #e91e63;
}
#List .e-list-item:nth-child(6) .e-avatar {
background-color: #009688;
}
#List .e-list-item:nth-child(8) .e-avatar {
background-color: #0088;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace WebApplication1.Controllers
{
public class ListViewController : Controller
{
public IActionResult list()
{
List<object> listdata = new List<object>();
listdata.Add(new
{
text= "Jenifer",
contact= "(206) 555-985774",
id= "1",
avatar= "",
pic= "pic01"
});
listdata.Add(new
{
text= "Amenda",
contact= "(206) 555-3412",
id= "2",
avatar= "A",
pic= ""
});
listdata.Add(new
{
text= "Isabella",
contact= "(206) 555-8122",
id= "4",
avatar= "",
pic= "pic02"
});
listdata.Add(new
{
text= "William ",
contact= "(206) 555-9482",
id= "5",
avatar= "W",
pic= ""
});
listdata.Add(new
{
text= "Jacob",
contact= "(71) 555-4848",
id= "6",
avatar= "",
pic= "pic04"
});
listdata.Add(new
{
text= "Matthew",
contact= "(71) 555-7773",
id= "7",
avatar= "M",
pic= ""
});
listdata.Add(new
{
text= "Oliver",
contact= "(71) 555-5598",
id= "8",
avatar= "",
pic= "pic03"
});
listdata.Add(new
{
text= "Charlotte",
contact= "(206) 555-1189",
id= "9",
avatar= "C",
pic= ""
});
ViewBag.dataSource = listdata;
return View();
}
}
}