Search results

Create Mobile Contact layout from ListView in React ListView component

01 Dec 2021 / 3 minutes to read

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.
Copied to clipboard
let dataSource = [
  {
text: "Jenifer", contact: "(206) 555-985774", id: "1", avatar: "", pic: "pic01"
  },
  {
text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: ""
  }
];
Copied to clipboard
let dataSource = [
    {
        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 name e-avatar e-avatar-circle from data source.
Copied to clipboard
 public listTemplate(data): JSX.Element {
let letterAvatar = <span className='e-avatar e-avatar-circle'>{data.avatar}</span>
let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-circle`}></span>

return (
    <div className='e-list-wrapper e-list-multi-line e-list-avatar'>
        {data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
        <span className="e-list-content">{data.contact}</span>
    </div>
);
}
Copied to clipboard
listTemplate(data);
JSX.Element;
{
    let letterAvatar = <span className='e-avatar e-avatar-circle'>{data.avatar}</span>;
    let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-circle`}></span>;
    return (<div className='e-list-wrapper e-list-multi-line e-list-avatar'>
        {data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
        <span className="e-list-content">{data.contact}</span>
    </div>);
}

Avatars can be set in different sizes in avatar classes. To know more about avatar classes, refer to Avatar.

Source
Preview
App.tsx
index.tsx
index.html
index.css
App.jsx
index.jsx
Copied to clipboard
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

export default class App extends React.Component<{}, {}> {
  //Define an array of JSON data
public data: { [key: string]: Object }[] = [
    { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },
    { id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },
    { id: 's_05', text: 'Jenifer', pic: 'pic01', avatar: '' },
    { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
    { id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },
    { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
    { id: 's_08', text: 'Michael', avatar: 'M', pic: '' }
];

public fields: any = { text: "Name" };

public listTemplate(data: any): JSX.Element {
    let letterAvatar = <span className='e-avatar e-avatar-circle'>{data.avatar}</span>
    let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-circle`}></span>

    return (
        <div className='e-list-wrapper e-list-avatar'>
            {data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
            <span className="e-list-content">{data.text}</span>
        </div>
    );
}

render() {
    return (
       <div>
            {/* ListView element */}
            <ListViewComponent id='list' dataSource={this.data} headerTitle='Contacts' showHeader={true}
                sortOrder="Ascending" width='350px' template={this.listTemplate as any}
                fields={this.fields as any} cssClass='e-list-template'></ListViewComponent>
        </div>

    );
}
}
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React 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 React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

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

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

#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;
}
Copied to clipboard
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        //Define an array of JSON data
        this.data = [
            { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },
            { id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },
            { id: 's_05', text: 'Jenifer', pic: 'pic01', avatar: '' },
            { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
            { id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },
            { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
            { id: 's_08', text: 'Michael', avatar: 'M', pic: '' }
        ];
        this.fields = { text: "Name" };
    }
    listTemplate(data) {
        let letterAvatar = <span className='e-avatar e-avatar-circle'>{data.avatar}</span>;
        let imageAvatar = <span className={`${data.pic} e-avatar e-avatar-circle`}></span>;
        return (<div className='e-list-wrapper e-list-avatar'>
            {data.avatar !== "" ? (letterAvatar) : (imageAvatar)}
            <span className="e-list-content">{data.text}</span>
        </div>);
    }
    render() {
        return (<div>
            
            <ListViewComponent id='list' dataSource={this.data} headerTitle='Contacts' showHeader={true} sortOrder="Ascending" width='350px' template={this.listTemplate} fields={this.fields} cssClass='e-list-template'></ListViewComponent>
        </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));