Create mobile contact layout from listview in EJ2 TypeScript Listview control
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
.
- Render the ListView with dataSource that has avatar data. You can set avatar data as either text or class names. Refer to the following codes.
let dataSource: { [key: string]: Object }[] = [
{
text: "Jenifer", contact: "(206) 555-985774", id: "1", avatar: "", pic: "pic01"
},
{
text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: ""
}
];
- Set
avatar
classes in ListView template to customize contact icon. In the following codes, medium size avatar has been set using the class namee-avatar e-avatar-circle
from data source.
template: '<div class="e-list-wrapper e-list-multi-line e-list-avatar">' +
'${if(avatar!=="")}' +
'<span class="e-avatar e-avatar-circle">${avatar}</span>' +
'${else}' +
'<span class="${pic} e-avatar e-avatar-circle"> </span>' +
'${/if}' +
'<span class="e-list-item-header">${text}</span>' +
'<span class="e-list-content">${contact}</span>' +
'</div>';
Avatars can be set in different sizes in avatar classes. To know more about avatar classes, refer to Avatar.
-
Sort the contact names using the
sortOder
property of ListView. -
Enable the
showHeader
property, and set theheaderTitle
asContacts
.
import { ListView } from "@syncfusion/ej2-lists";
let template: string = '<div class="e-list-wrapper e-list-multi-line e-list-avatar">' +
'${if(avatar!=="")}' +
'<span class="e-avatar e-avatar-circle">${avatar}</span>' +
'${else}' +
'<span class="${pic} e-avatar e-avatar-circle"> </span>' +
'${/if}' +
'<span class="e-list-item-header">${text}</span>' +
'<span class="e-list-content">${contact}</span>' +
'</div>';
//Define an array of JSON data
let dataSource: { [key: string]: Object }[] = [
{
text: "Jenifer",
contact: "(206) 555-985774",
id: "1",
avatar: "",
pic: "pic01"
},
{ text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: "" },
{
text: "Isabella",
contact: "(206) 555-8122",
id: "4",
avatar: "",
pic: "pic02"
},
{
text: "William ",
contact: "(206) 555-9482",
id: "5",
avatar: "W",
pic: ""
},
{
text: "Jacob",
contact: "(71) 555-4848",
id: "6",
avatar: "",
pic: "pic04"
},
{ text: "Matthew", contact: "(71) 555-7773", id: "7", avatar: "M", pic: "" },
{
text: "Oliver",
contact: "(71) 555-5598",
id: "8",
avatar: "",
pic: "pic03"
},
{
text: "Charlotte",
contact: "(206) 555-1189",
id: "9",
avatar: "C",
pic: ""
}
];
// Initialize the ListView control
let listObj: ListView = new ListView({
//Set the defined data to the dataSource property
dataSource: dataSource,
//Map the appropriate columns to the fields property
fields: { text: "text" },
//Set the width of the ListView
width: "350px",
//Enable the header of the ListView
showHeader: true,
//Set the header title
headerTitle: "Contacts",
//set cssClass for template customization
cssClass: 'e-list-template',
//Set the customized template
template: template,
sortOrder: "Ascending"
});
//Render the initialized ListView control
listObj.appendTo("#List");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for ListView </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for ListView UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-layouts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id="List" tabindex="1"></div>
</div>
</body>
</html>