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.

var dataSource = [
    { 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: '' },
];

var letterAvatarList = new ej.lists.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/32.1.19/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-lists/styles/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="element">
            <!-- Listview element -->
            <div id="letterAvatarList"></div>
        </div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
    <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/demos/src/grid/images/2.png');
        }

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

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

        .pic04 {
            background-image: url('https://ej2.syncfusion.com/demos/src/grid/images/5.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;
}