Integrate the Avatar control into the ListView control

27 Jan 20259 minutes to read
Avatar can be integrated into various controls to enhance a wide variety of applications. Some integrations are demonstrated in the following section.
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.
index.ts
index.html
index.css
import { ListView } from '@syncfusion/ej2-lists';
// ListView datasource with avatar and image source fields
let dataSource: { [key: string]: Object; }[] = [
    { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },
    { id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },
    { id: 's_05', text: 'John', pic: 'pic01', avatar: '' },
    { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
    { id: 's_06', text: 'Michael', pic: 'pic02', avatar: '' },
    { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' }
];

let letterAvatarList: ListView = new ListView({
    // Bind ListView datasource
    dataSource: dataSource,
    // Assign header title
    headerTitle: 'Contacts',
    // Enable header title
    showHeader: true,
    // Assign list-item template
    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>',
    // Assign sorting order
    sortOrder: 'Ascending'
});
letterAvatarList.appendTo('#letterAvatarList');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for Avatar </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Avatar UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/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='element'>
            <!-- Listview element -->
            <div id="letterAvatarList"></div>
        </div>
    </div>
    <style>
        /* 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;
        }

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

        #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('https://ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png');
        }

        .pic02 {
            background-image: url('https://ej2.syncfusion.com/javascript/demos/src/avatar/images/pic02.png');
        }

        .pic03 {
            background-image: url('https://ej2.syncfusion.com/javascript/demos/src/avatar/images/pic03.png');
        }

        .pic04 {
            background-image: url('https://ej2.syncfusion.com/javascript/demos/src/avatar/images/pic04.png');
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#element {
    width: 400px;
    margin: auto;
    border-radius: 3px;
    justify-content: center;
}