Contents
- Chat order in template
- Adding messages to chat window
Having trouble getting help?
Contact Support
Contact Support
Chat window user interface using EJ2 JavaScript ListView control
10 Mar 202515 minutes to read
ListView can be customized to function as a chat window. To achieve this, use the ListView template
property alongside the Avatar
control.
- The ListView template property is used to showcase the ListView as chat window.
- Avatar control is used to design the image of contact person.
Refer to the template code snippet below for a chat window implementation:
let template =
'<div class="settings">' +
'${if(chat!=="receiver")}' +
'<div id="content">' +
'<div class="name">${text}</div>' +
'<div id="info">${contact}</div></div>' +
'${if(avatar!=="")}' +
'<div id="image"><span class="e-avatar img1 e-avatar-circle">${avatar}</span></div>' +
"${else}" +
'<div id="image"><span class="${pic} img1 e-avatar e-avatar-circle"> </span></div>' +
"${/if}" +
"${else}" +
'${if(avatar!=="")}' +
'<div id="image2"><span class="e-avatar img2 e-avatar-circle">${avatar}</span></div>' +
"${else}" +
'<div id="image2"><span class="${pic} img2 e-avatar e-avatar-circle"> </span></div>' +
"${/if}" +
'<div id="content1">' +
'<div class="name1">${text}</div>' +
'<div id="info1">${contact}</div>' +
"</div>" +
"${/if}" +
"</div>";
Chat order in template
The ListView template is rendered with list items based on sender and receiver information from the ListView’s data source.
Adding messages to chat window
- Use textbox to get message from user.
- Add the textbox message to ListView dataSource using
addItem
method.
document.getElementById("btn").addEventListener("click", e => {
var value = document.getElementById("name").value;
document
.getElementById("List")
.ej2_instances[0].addItem([
{
text: "Amenda",
contact: value,
id: "2",
avatar: "A",
pic: "",
chat: "receiver"
}
]);
});
var template =
'<div class="settings">' +
'${if(chat!=="receiver")}' +
'<div id="content">' +
'<div class="name">${text}</div>' +
'<div id="info">${contact}</div></div>' +
'${if(avatar!=="")}' +
'<div id="image"><span class="e-avatar img1 e-avatar-circle">${avatar}</span></div>' +
"${else}" +
'<div id="image"><span class="${pic} img1 e-avatar e-avatar-circle"> </span></div>' +
"${/if}" +
'${else}' +
'${if(avatar!=="")}' +
'<div id="image2"><span class="e-avatar img2 e-avatar-circle">${avatar}</span></div>' +
"${else}" +
'<div id="image2"><span class="${pic} img2 e-avatar e-avatar-circle"> </span></div>' +
"${/if}" +
'<div id="content1">' +
'<div class="name1">${text}</div>' +
'<div id="info1">${contact}</div>' +
"</div>" +
'${/if}' +
"</div>";
//Define an array of JSON data
var dataSource = [
{ 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 kind of application going to launch", id: "4", avatar: "", pic: "pic02", chat: "sender" },
{ text: "Amenda", contact: "A kind 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" }
];
var listObj = new ej.lists.ListView({
//Set defined data to dataSource property.
//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: "Chat",
//Set the customized template
template: template,
});
listObj.appendTo('#List');
var button = new ej.buttons.Button();
// Render initialized button.
button.appendTo('#btn');
document.getElementById('btn').addEventListener('click', (e) => {
var value = document.getElementById('name').value;
document.getElementById('List').ej2_instances[0].addItem([{ text: "Amenda", contact: value, id: "2", avatar: "A", pic: "", chat: "receiver" }]);
document.getElementById('name').value = "";
});
<!DOCTYPE html>
<html lang="en">
<head><script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</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/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.2.4/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 style="width: 350px;margin: 0 auto;"><input id="name" style="width: 275px" class="e-input" type="text"
placeholder="Type your message">
<button id="btn" style="float:right">Send</button>
</div>
</div>
<style>
#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;
}
#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");
}
/* csslint ignore:start */
.img2 {
margin-left: 10px;
margin-top: 2px !important;
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: 200px;
margin-left: 87px;
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-item {
padding: 0 !important;
}
.e-listview .e-list-header {
color: white !important;
}
.e-listview .e-list-header {
background: rgb(2, 120, 215) !important;
}
#List.e-listview .e-hover {
background-color: transparent;
}
/* csslint ignore:end */
</style>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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%;
}