Create mobile contact layout in EJ2 JavaScript ListView control

1 Mar 20258 minutes to read

You can customize the ListView using the template property. Follow these steps to customize the ListView as a mobile contact view with the ej2-avatar:

Render the ListView with a dataSource containing avatar data. Avatar data can be provided as either text or class names. Below is an example code snippet for data source initialization:

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: ""
  }
];

Use avatar classes in the ListView template to customize the contact icon. The following template example sets a medium-sized avatar using the class e-avatar e-avatar-circle from the 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 using avatar classes. For more information on avatar classes, refer to the Avatar demo.

Sort the contact names using the sortOder property of ListView.
Enable the showHeader property, and set the headerTitle as Contacts.

index.js
index.html
index.css
var 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>';

//Define an array of JSON data
var dataSource = [
    { 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 ListView control
var listObj = new ej.lists.ListView({
    //Set defined data to dataSource property
    dataSource: dataSource,
    //Map the appropriate columns to fields property
    fields: { text: "text" },
    cssClass: 'e-list-template',
    //set width of ListView
    width: "350px",
    //enable ListView header
    showHeader: true,
    //set header title
    headerTitle: "Contacts",
    //Set customized template
    template: template,
    sortOrder: "Ascending",
    height: 380
});
//Render 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/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-layouts/styles/material.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/30.1.37/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="List" tabindex="1"></div>
  </div>

  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
  <style>
    #List {
      margin: 0 auto;
      font-size: 15px;
      border: 1px solid #ccc;
    }

    .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-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>
</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%;
}