Search results

Customize ListView as Chat Window

ListView can be customizable as chat window. To achieve that, use ListView template property and Avatar component.

* Listview template property is used to showcase the ListView as chat window.
* Avatar component is used to design the image of contact person.

Refer the below template code snippet for Template of chat window.

public listTemplate(data: any): JSX.Element {
        let sendertemplate = <div className='settings'><div id="content"><div className="name">{data.text}</div><div id="info">{data.contact}</div></div>{
                    data.avatar !== "" ?
                        <div id="image"><span className='e-avatar img1 e-avatar-circle'>{data.avatar}</span></div> : <div id="image"><span className={`${data.pic} img1 e-avatar e-avatar-circle`}></span></div>
                }</div>
        let receivertemplate = <div className='settings'>{
                    data.avatar !== "" ?
                        <div id="image2"><span className='e-avatar img2 e-avatar-circle'>{data.avatar}</span></div> : <div id="image2"><span className={`${data.pic} img2 e-avatar e-avatar-circle`}></span></div>
                }<div id="content1"><div className="name1">{data.text}</div><div id="info1">{data.contact}</div></div></div>


        return (
            <div>
                {data.chat !== "receiver" ? (sendertemplate) : (receivertemplate)}
            </div>
        );
    }
listTemplate(data, any);
JSX.Element;
{
    let sendertemplate = <div className='settings'><div id="content"><div className="name">{data.text}</div><div id="info">{data.contact}</div></div>{data.avatar !== "" ?
        <div id="image"><span className='e-avatar img1 e-avatar-circle'>{data.avatar}</span></div> : <div id="image"><span className={`${data.pic} img1 e-avatar e-avatar-circle`}></span></div>}</div>;
    let receivertemplate = <div className='settings'>{data.avatar !== "" ?
        <div id="image2"><span className='e-avatar img2 e-avatar-circle'>{data.avatar}</span></div> : <div id="image2"><span className={`${data.pic} img2 e-avatar e-avatar-circle`}></span></div>}<div id="content1"><div className="name1">{data.text}</div><div id="info1">{data.contact}</div></div></div>;
    return (<div>
                {data.chat !== "receiver" ? (sendertemplate) : (receivertemplate)}
            </div>);
}

Chat order in template

In ListView template, we have rendered the list items based on receiver and sender information from dataSource of listview.

Adding messages to chat window

* Use textbox to get message from user.
* Add the textbox message to ListView dataSource using [addItem](../../api/list-view/#additem) method.
btnClick() {
    let value = this.textboxEle.value;
    this.listObj.addItem([{ text: "Amenda", contact: value, id: "2", avatar: "A", pic: "", chat: "receiver" }]);
    this.textboxEle.value ="";
}
btnClick();
{
    let value = this.textboxEle.value;
    this.listObj.addItem([{ text: "Amenda", contact: value, id: "2", avatar: "A", pic: "", chat: "receiver" }]);
    this.textboxEle.value = "";
}
Source
Preview
index.tsx
index.html
index.css
index.jsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

export default class App extends React.Component<{}, {}> {
  listObj: ListViewComponent = null as any;
  textboxEle: any;
  //Define an array of JSON data
  data: { [key: string]: Object }[] = [
    {
      text: "Jenifer",
      contact: "Hi",
      id: "1",
      avatar: "",
      pic: "pic01",
      chat: "sender"
    },
    { text: "Amenda", contact: "Hello", id: "2", avatar: "A", pic: "", chat: "receiver" },
    {
      text: "Jenifer",
      contact: "What Knid of application going to launch",
      id: "4",
      avatar: "",
      pic: "pic01",
      chat: "sender"
    },
    {
      text: "Amenda ",
      contact: "A knid of Emergency broadcast App",
      id: "5",
      avatar: "A",
      pic: "",
      chat: "receiver"
    },
    {
      text: "Jacob",
      contact: "Can you please elaborate",
      id: "6",
      avatar: "",
      pic: "pic04",
      chat: "sender"
    }
  ];

  listTemplate(data: any): JSX.Element {
    const sendertemplate = (
      <div className="settings">
        <div id="content">
          <div className="name">{data.text}</div>
          <div id="info">{data.contact}</div>
        </div>
        {data.avatar !== "" ? (
          <div id="image">
            <span className="e-avatar img1 e-avatar-circle">{data.avatar}</span>
          </div>
        ) : (
          <div id="image">
            <span className={`${data.pic} img1 e-avatar e-avatar-circle`} />
          </div>
        )}
      </div>
    );

    const receivertemplate = (
      <div className="settings">
        {data.avatar !== "" ? (
          <div id="image2">
            <span className="e-avatar img2 e-avatar-circle">{data.avatar}</span>
          </div>
        ) : (
          <div id="image2">
            <span className={`${data.pic} img2 e-avatar e-avatar-circle`} />
          </div>
        )}
        <div id="content1">
          <div className="name1">{data.text}</div>
          <div id="info1">{data.contact}</div>
        </div>
      </div>
    );

    return <div>{data.chat !== "receiver" ? sendertemplate : receivertemplate}</div>;
  }

  btnClick() {
    const value = this.textboxEle.value;
    this.listObj.addItem([
      { text: "Amenda", contact: value, id: "2", avatar: "A", pic: "", chat: "receiver" }
    ]);
    this.textboxEle.value = "";
  }

  render() {
    return (
      <div>
        {/* ListView element */}
        <ListViewComponent
          id="List"
          dataSource={this.data}
          headerTitle="Chat"
          showHeader={true}
          template={this.listTemplate as any}
          ref={scope => {
            this.listObj = scope as any;
          }}
        />

        <input
          id="inputname"
          className="e-input"
          ref={textbox => {
            this.textboxEle = textbox;
          }}
          type="text"
          placeholder="Type your message"
        />

        <ButtonComponent id="btn" onClick={this.btnClick.bind(this)}>
          Send
        </ButtonComponent>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('element'));
<!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-buttons/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="//cdn.syncfusion.com/ej2/ej2-inputs/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>
#List {
  margin: 0 auto;
  border: 1px solid #ccc;
}

#List .e-list-item {
  height: auto;
  cursor: pointer;
}

#List .e-list-header .e-text {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 26px;
}

#List #info,
#List .name {
  font-size: 11px;
  line-height: 20px;
}

#List .name {
  padding-top: 3px;
  font-weight: 500;
  padding-left:150px;
  margin-left: 55px;
}
#List #info {
  float: right;
  margin-right:10px;
}
.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");
}

.img2 {
  margin-left: 10px;
  margin-top: 7px;
  font-size: 13px;
}

#List #content1 {
  width: 200px;
  background-color: aliceblue;
  display: inline-block;
  margin: 5px;
  
}

#List #info1,
#List .name1 {
  font-size: 11px;
  line-height: 20px;
  margin-left: 10px;
}

#List .name1 {
  padding-top: 3px;
  font-weight: 500;
}
#List #content {
    margin: 5px;
    width: 250px;
    margin-left: 62px;
    background-color: aliceblue;
    display:inline-block
}
#image {
    float: right;
    /* display: inline-block; */

}
#image2 {
    float: left;
    /* display: inline-block; */

}
.img1 {
    margin-right: 10px;
    margin: 5px;
    font-size: 13px;
}
.e-listview .e-list-header{
  color: white;
}
.e-listview .e-list-header{
  background: rgb(2, 120, 215);
}
#List.e-listview .e-hover {
  background-color: transparent;
}
#inputname {
  width: 275px
}
.message {
  width: 350px;
  margin: 0 auto;
}
#btn {
  float:right
}
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.listObj = null;
        //Define an array of JSON data
        this.data = [
            {
                text: "Jenifer",
                contact: "Hi",
                id: "1",
                avatar: "",
                pic: "pic01",
                chat: "sender"
            },
            { text: "Amenda", contact: "Hello", id: "2", avatar: "A", pic: "", chat: "receiver" },
            {
                text: "Jenifer",
                contact: "What Knid of application going to launch",
                id: "4",
                avatar: "",
                pic: "pic01",
                chat: "sender"
            },
            {
                text: "Amenda ",
                contact: "A knid of Emergency broadcast App",
                id: "5",
                avatar: "A",
                pic: "",
                chat: "receiver"
            },
            {
                text: "Jacob",
                contact: "Can you please elaborate",
                id: "6",
                avatar: "",
                pic: "pic04",
                chat: "sender"
            }
        ];
    }
    listTemplate(data) {
        const sendertemplate = (<div className="settings">
        <div id="content">
          <div className="name">{data.text}</div>
          <div id="info">{data.contact}</div>
        </div>
        {data.avatar !== "" ? (<div id="image">
            <span className="e-avatar img1 e-avatar-circle">{data.avatar}</span>
          </div>) : (<div id="image">
            <span className={`${data.pic} img1 e-avatar e-avatar-circle`}/>
          </div>)}
      </div>);
        const receivertemplate = (<div className="settings">
        {data.avatar !== "" ? (<div id="image2">
            <span className="e-avatar img2 e-avatar-circle">{data.avatar}</span>
          </div>) : (<div id="image2">
            <span className={`${data.pic} img2 e-avatar e-avatar-circle`}/>
          </div>)}
        <div id="content1">
          <div className="name1">{data.text}</div>
          <div id="info1">{data.contact}</div>
        </div>
      </div>);
        return <div>{data.chat !== "receiver" ? sendertemplate : receivertemplate}</div>;
    }
    btnClick() {
        const value = this.textboxEle.value;
        this.listObj.addItem([
            { text: "Amenda", contact: value, id: "2", avatar: "A", pic: "", chat: "receiver" }
        ]);
        this.textboxEle.value = "";
    }
    render() {
        return (<div>
        
        <ListViewComponent id="List" dataSource={this.data} headerTitle="Chat" showHeader={true} template={this.listTemplate} ref={scope => {
            this.listObj = scope;
        }}/>

        <input id="inputname" className="e-input" ref={textbox => {
            this.textboxEle = textbox;
        }} type="text" placeholder="Type your message"/>

        <ButtonComponent id="btn" onClick={this.btnClick.bind(this)}>
          Send
        </ButtonComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));