Create mobile contact layout in EJ2 TypeScript 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.ts
index.html
index.css
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",
    height: 380
});

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