Search results

Create Mobile Contact layout from ListView in React ListView component

03 Aug 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
index.tsx
index.html
index.css
index.jsx
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
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'));